Fleet UI: Button loading spinners

[RachelElysia]

Cerra #6666

Fix

• All UI Button that post to the API contain loading spinners using the isLoading parameter and adding the appropriate className *button-name*-loading
• Buttons: save, save label, update label, save policy, save query pack, add query, create, transfer, schedule, download installer, delete, remove
• Fix any modals that show the loading spinner across the whole modal when it updates the API to just show the loading spinner on the CTA button

Other tech debt

• Rename DeletePoliciesModal.tsx to DeletePolicyModal.tsx to match every other Delete*singularnoun*Modal.tsx naming convention
• Style modal-cta-wrap buttons globally removing all reused ${baseClass}__btn-wrap styling
• Fix className add-policy-modal__modal to add-policy-modal
• Fix use of className button button--brand or button button--unstyled to use variant parameter brand or unstyled
• Fix alignment for show, copy, edit, delete icons for Enroll secret modal
• Fix SecretEditorModal.tsx to use ISecretEditorModalProps not IAddSecretModal
• Standardize everything to isLoading*Item* and isUpdating*Item* (some were written as is*Item*Loading, e.g. isLoadingLabels, isUpdatingHosts)

Screenshot examples (Delete, Save label, Remove, Schedule):

Checklist for submitter

If some of the following don't apply, delete the relevant line.

• [x] Changes file added for user-visible changes (in changes/ and/or orbit/changes/).
• [x] Manual QA for all new/changed functionality

[lukeheath]

The best version of this kind of spinner I've seen is Angular Material's loading spinner: https://material.angular.io/components/progress-spinner/overview. It's also works very well inside a button. Of course, we want use that because it's specific to Angular, but I'm going to poke around and see if I can find a CSS-only version we can use.

[lukeheath]

Here's an example of a CSS-only version that I customized a bit: https://codepen.io/lukeheath-the-encoder/pen/JjLaWMw

[RachelElysia]

Here's an example of a CSS-only version that I customized a bit: https://codepen.io/lukeheath-the-encoder/pen/JjLaWMw

Super clean!!!!

[RachelElysia]

Looks great! ✨

I would like to update the white background version so we're using a single spinner throughout. I'll take a closer look at that this week. Since this is not an urgent issue, we can push this feature to the next release.

Let me know if you're able to make it a single spinner. I was wrestling with it but the animation is attached to one color only and I couldn't get it to render different colors for the same element.

[lukeheath]

Let me know if you're able to make it a single spinner. I was wrestling with it but the animation is attached to one color only and I couldn't get it to render different colors for the same element.

@RachelElysia Just put in a PR to your branch with some changes: https://github.com/RachelElysia/fleet/pull/51. Let me know what you think! If it looks good, feel free to merge in and take it from here. I tested and all seems good but always good to get another set of eyes.

[RachelElysia]

@lukeheath This is good to go! Would love to merge early next week to avoid more merge conflicts since it touches so many files!