Keep feature library results visible during search

Anas Shahidrequested to merge
621643-feature-library-search-flash into master

What does this MR do and why?

The feature library modal ("Browse more features" in the super sidebar) flashed its search results on every keystroke. Two bugs caused this:

  1. The results grid was gated on the isSearching flag, so every debounced keystroke unmounted the whole grid, showed a spinner, and remounted the grid once the synonym-search endpoint responded.
  2. fetchResults cleared the previous synonym result ids up front, so items that only matched through backend synonyms disappeared and reappeared around every request.

This MR applies a stale-while-revalidate pattern:

  • The results grid stays mounted while a request is in flight. Client-side title and description matches render instantly, and backend synonym results merge in once the response lands.
  • The previous query's synonym ids are kept during the in-flight window and only replaced once the new response arrives (they are cleared if the query drops below the 2-character minimum, or on error fallback).
  • The block loading spinner now only shows when there is nothing to display. During requests, the search box shows GlSearchBoxByType's built-in is-loading spinner instead.
  • Behavior is aligned with what is visible on screen: Enter and ArrowDown focus the first result even while a request is in flight, the screen reader live region announces the visible result count instead of "Searching" once results are shown, and the "Search with Gemini" footer button no longer flickers per keystroke.

All 157 tests in spec/frontend/super_sidebar/components/feature_library/feature_library_modal_spec.js pass. 5 tests were updated to match the new behavior, and 6 were added covering stale-while-revalidate keep/replace/drop, in-flight keyboard focus, in-flight live region announcements, and the search box loading state.

Screenshots or screen recordings

Before After
before after

Recordings were taken with 500 ms of simulated network latency added, to make the round trip visible.

How to set up and validate locally

  1. Open any project.
  2. Click "Browse more features" at the bottom of the left sidebar to open the feature library modal.
  3. Type a multi-word query character by character (optionally enable network throttling in your browser devtools to make the round trip visible).
  4. Observe that results no longer disappear between keystrokes: client-side matches stay visible while the request is in flight, and synonym results merge in once the response arrives.

This MR targets the branch from !249425 (merged) because it builds on the search status live region and keyboard focus handling introduced there. It should be reviewed and merged after that MR; the target branch will update to master automatically once it merges.

Related to #621643

Merge request reports