Add loading state for security attribute admin ui

What does this MR do and why?

Add loading state for security attribute admin ui

Show a loading state in each panel when loading
(category list and category/attributes form)
Also remove dead code: client-side query used for prototyping

Changelog: changed
EE: true

References

• epic: Security Attributes/Context Filtering (&18010)

Screenshots or screen recordings

Before	After
blank form shows while loading 🐛	skeleton loader shows while loading 💀

expand for recording from before e9634185

How to set up and validate locally

0. git checkout mfluharty-add-security-attributes-admin-ui-loading-state

1. have a GitLab Ultimate licence
2. go to a group you own => Secure => Security configuration => Security attributes
3. check that the tab settles into its normal state:
   • the left panel should list the group's categories
   • the first category should be selected
   • the right panel should show that category's form and its attributes
   • no skeleton placeholder should still be on screen once the data arrives

a group with no categories yet

1. create a brand new group, or pick one that has never had a security category added
2. go to that group => Secure => Security configuration => Security attributes
3. check that the tab does not get stuck loading:
   • both skeleton placeholders should disappear once the query comes back
   • the left panel should render as an empty category list rather than a placeholder
   • the right panel should render the form rather than a placeholder

seeing the loading state itself

1. open devtools => Network => set throttling to Slow 4G
2. reload the Security attributes tab
3. check that while the query is in flight:
   • the left panel shows a placeholder in place of the category list
   • the right panel shows a placeholder in place of the category form
   • neither the real category list nor the real form is on screen at the same time as its placeholder

the query error path

1. open devtools => Network => block the GraphQL request, or go offline
2. reload the Security attributes tab
3. check that:
   • both placeholders disappear rather than spinning forever
   • the error is reported to Sentry, visible as a captureException call in the console when Sentry is not configured locally

to run tests

yarn jest ee/spec/frontend/security_configuration/components/security_attributes/configure_attributes_spec.js

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.