Support button loading state

[mperrotti]

This change is based on the patterns documented in #590

Our buttons don't current support a "loading" state. This may be useful for slow processes - especially when we want to block users from hitting the "submit" button multiple times.

Example

4.loadingText.mp4

Implementation considerations

When implementing a "loading" button state, don't remove the button from the DOM or pass the disabled attribute. Doing so would remove focus from the button, creating a confusing experience for assistive technologies such as a screen reader.

Instead, render the loading text in an element that is positioned on top of the button to create the illusion that the button is hidden. This will also prevent people who use a mouse cursor from clicking the button while it's in a loading state. To prevent keyboard users from activating the button, remove the click handler while the button is in a loading state.

Set the button's aria-disabled attribute to "true" while it's hidden by the loading text.

Previous exploration by a11y

https://github.com/github/primer/discussions/652#discussioncomment-2054579

[mperrotti]

Filed in wrong repo