Optimize SelectPanel filtering performance with useDeferredValue

[Copilot]

SelectPanel experiences input lag when filtering large lists because expensive list rendering blocks keystrokes. This implements React's useDeferredValue pattern already used in Autocomplete.

Implementation

Added useDeferredValue to FilteredActionList to separate immediate UI updates from expensive rendering:

// Immediate: text input remains responsive
const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(...)

// Deferred: expensive list rendering doesn't block typing
const deferredItems = useDeferredValue(items)

Updated to use deferredItems:

• List rendering (grouped and ungrouped)
• getItemListForEachGroup callback
• useAnnouncements hook
• onInputKeyDown keyboard handler

Kept immediate items:

• Select-all checkbox (requires immediate state)

Changelog

Changed

• FilteredActionList now uses useDeferredValue for list rendering operations to prevent input lag with large lists

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

Testing & Reviewing

All existing SelectPanel and ActionList tests pass. The change is internal to FilteredActionList with no API changes.

A changeset has been added to document this performance improvement for the changelog.

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)

Original prompt

Problem

The SelectPanel component can experience input lag when filtering large lists because the filtering operation runs synchronously on every keystroke, blocking user input.

The Autocomplete component already addresses this problem by using React's useDeferredValue hook (see packages/react/src/Autocomplete/Autocomplete.tsx), which allows typing to remain responsive while filtering large lists at lower priority.

Solution

Apply the same pattern from Autocomplete to SelectPanel and FilteredActionList:

1. In FilteredActionList.tsx: Use useDeferredValue to defer the filter value used for rendering the filtered items list, while keeping the input value immediate for display in the text input.

2. The approach should:

   • Keep the text input immediately responsive (show what the user types without delay)
   • Defer the expensive filtering/rendering of the list items
   • Follow the same pattern already established in Autocomplete

Implementation Reference

The Autocomplete component shows how this should work:

// From packages/react/src/Autocomplete/Autocomplete.tsx
const deferredInputValue = useDeferredValue(inputValue)

And the context is split to provide:

• Immediate input value for the text input display
• Deferred input value for the menu filtering

Acceptance Criteria

• FilteredActionList uses useDeferredValue for the filter value passed to item rendering
• The text input remains immediately responsive during typing
• The list filtering is deferred to avoid blocking keystrokes
• Existing tests continue to pass
• The pattern is consistent with how Autocomplete handles this

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 773fe7d

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	Patch

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-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[mattcosta7]

@copilot add a changeset

[Copilot]

@copilot add a changeset

Added changeset in commit 773fe7d. The changeset documents this as a patch release with a performance improvement to FilteredActionList.

[mattcosta7]

Closing via #7411