Select panel loading states

[camertron]

Closes https://github.com/github/primer/issues/3921

Body spinner

Alt: a video of a button that, when clicked, opens a SelectPanel. There is a spinner where the list of items should be. After a few seconds, the spinner is replaced by the list of items.

body_spinner.mov

Body skeleton

Alt: a video of a button that, when clicked, opens a SelectPanel. There is a list of animated skeletons where the list of items should be. After a few seconds, the skeleton is replaced by the list of items.

body_skeleton.mov

Input spinner

Alt: a video of an open SelectPanel. The letter "b" is entered into the filter input field. After a slight delay, a spinner appears inside the input field, replacing the magnifying glass icon that was there before. A few seconds later, the spinner is replaced the magnifying glass and the list of items is replaced by a filtered list of items. Each item contains the letter "b."

input_spinner.mov

Changelog

New

Changed

In order to trigger loading the initial list of items, I had to manually call the onFilterChange callback, which is expected to be called with the filter input value (i.e. the text the user entered) and the corresponding React.ChangeEvent object. I was unable to figure out how to call it with a dummy React.ChangeEvent object, so I changed the type signature of the callback to allow undefined for the event object.

I used primer-query to identify all the existing usages of SelectPanel that pass a onFilterChange callback and have determined that nobody is actually using at second event arg. We could probably remove it entirely.

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

I'm conflicted here. On the one hand, this is technically a breaking change and should therefore necessitate a major release. On the other hand, nobody in dotcom uses the second event parameter, so could be considered backwards-compatible if we consider dotcom to be our only consumer. Looking for feedback here.

Testing & Reviewing

Merge checklist

• Added/updated tests
  - [ ] Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[broccolinisoup]

Hey @camertron! Thanks for addressing the feedback and apologies for the delay. Let's merge this 🚀