perf(ui): cache search keyboard navigation targets#6
Closed
Conversation
There was a problem hiding this comment.
Pull request overview
This PR optimizes /search keyboard navigation by caching the set of keyboard-focusable result targets instead of querying/sorting the DOM on every keypress.
Changes:
- Introduces a
resultsContainerRefroot and a cachedfocusableElementslist. - Adds a
MutationObserver+requestAnimationFramescheduling to refresh the cached list when the results DOM changes. - Updates keyboard navigation to use the cached list and adds cleanup on unmount.
Owner
Author
|
@copilot open a new pull request to apply changes based on the comments in this thread |
…sly on start (#7) Co-authored-by: trivikr <16024985+trivikr@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
trivikr
force-pushed
the
get-focusable-elements
branch
from
5c2d673 to
3dafbd7
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
The search page supported keyboard navigation across org/user suggestions and package results, but it rebuilt the focusable target list on every
ArrowUp/ArrowDownkey press by querying the document, filtering for visible elements, and sorting them. That made navigation cost grow with the number of rendered results and suggestions, even though the navigation order is already reflected in DOM order.Description
This change makes search keyboard navigation use a cached, container-scoped list of focusable result elements instead of recomputing that list on each key event.
The results section now keeps track of focusable suggestion/result elements under a dedicated container ref. That cache is refreshed when the results DOM changes via a
MutationObserver, with updates coalesced throughrequestAnimationFrameto avoid redundant work during rapid UI changes. Keyboard handlers then read from the cached array directly, preserving the existing behavior while removing repeated whole-document queries and sorts from the hot path.It also includes the necessary lifecycle cleanup for the observer and any pending scheduled refresh when the page state changes or the component unmounts.