[Select panel] Loading states re-submission

[broccolinisoup]

This PR is a re-submission of #4929

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)

[changeset-bot]

🦋 Changeset detected

Latest commit: 1898b28

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[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!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.84 KB (+0.64% 🔺)
packages/react/dist/browser.umd.js	98.14 KB (+0.59% 🔺)