[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: 6d12edc

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	105.47 KB (+0.88% 🔺)
packages/react/dist/browser.umd.js	105.77 KB (+0.85% 🔺)

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[camertron]

Dotcom integration tests are failing because of #5559, so we should be able to merge safely.

[francinelucca]

LGTM, non-blocking comments

[camertron]

Dotcom changes need to ship before this PR can be merged (internal-only link): https://github.com/github/github/pull/359822

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/358709

[primer-integration]

🔴 golden-jobs completed with status failure.