Debounce component search input

[Mbeaulne]

Description

The component search input now debounces user keystrokes by 200ms before updating the query state used for lexical search and AI search. A new DebouncedComponentSearchInput component manages its own local input value and only commits to the parent after the debounce delay, preventing expensive lexical search operations from running on every keystroke. useDeferredValue is applied to the committed query so that React can deprioritize the search re-renders, keeping the input responsive. The AI search button is now enabled only after the debounced query has settled, and the test has been updated to wait for that enabled state before clicking.

Related Issue and Pull requests

Type of Change

• Bug fix
• New feature
• Improvement
• Cleanup/Refactor
• Breaking change
• Documentation update

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

1. Open the Dashboard Components view.
2. Type rapidly into the search box and confirm the UI remains responsive without lag on each keystroke.
3. Pause typing and confirm search results appear after ~200ms.
4. Verify the AI search button only becomes enabled once the debounced query has committed.
5. Click AI search and confirm it runs against the expected candidate pool.

Additional Comments

The onCommit callback reference is stabilised via a useRef so the debounce useEffect does not restart its timer when the parent re-renders with a new callback identity.

[github-actions]

🎩 Preview

A preview build has been created at: 06-18-fix_search_input_lag/609edda

[Mbeaulne]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Simplify component search result cards #2459
• Add context-aware component search suggestions #2458
• Add component discovery docs #2457
• Add component search analytics baseline #2456
• Limit dashboard component browse rendering #2454
• Add component search empty state suggestions #2453
• Decouple editor component search input #2452
• Polish component search explanations #2451
• Add compatible component suggestions #2450
• Add component collection search results #2449
• Add component lifecycle badges #2448
• Add component search URL state #2447
• Disable AI search when literal search finds no matches #2444
• Debounce component search input #2433 👈 (View in Graphite)
• add client-side embeddings cached in IndexedDB #2432
• Add search quality expectation tests for lexical search #2431
• Add deep AI search to rerank all components in selected sources #2430
• Add source-diverse AI rerank candidate pool #2429
• Add negative constraint parsing to lexical search #2428
• Add fuzzy/typo-tolerant matching for component name and I/O fields #2427
• Improve component search scoring relevance #2426
• Add synonym expansion to component lexical search #2425
• Normalize component search tokens for better matching #2424
• Expand component search indexing fields #2423
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[camielvs]

🤖 Code review — Debounce component search input

Small, sensible perf fix for the top of the stack — by #2432 every keystroke could trigger IDF scoring (#2426), fuzzy Levenshtein (#2427), and embedding work, so gating input is well-justified. The DebouncedComponentSearchInput implementation is clean: the onCommitRef pattern keeps the latest callback without resetting the 200ms timer, the cleanup is correct, the aria-label is preserved, and updating the test to await the button becoming enabled is the right adjustment.

Findings:

• Debounce + useDeferredValue together looks redundant. This PR introduces both: a 200ms debounce inside the new input component and useDeferredValue(query) in the parent. But the input is now a decoupled child with its own local state, so the parent's query only changes every 200ms and there's no longer a fast-updating controlled input for useDeferredValue to keep responsive. The net effect of the deferred layer here is mostly an extra frame of staleness on top of the debounce. I'd keep one mechanism — the standalone debounced input alone is the simpler choice. If both are deliberate, a one-line comment on what each buys would prevent a future "why two?".

• Only the Dashboard is debounced; the Editor isn't. ComponentSearchV2Content still uses immediate onChange + useDeferredValue. Given the branch name (fix_search_input_lag) and that the same heavy per-keystroke search runs in both surfaces, was leaving the Editor out intentional? If the lag affects both, the Editor would benefit from the same treatment (and it'd be a natural place to share the DebouncedComponentSearchInput component rather than duplicating later).

• Minor — input is no longer parent-controllable. Moving the value into child local state means the parent can't programmatically set/clear the query anymore. Nothing does that today, so it's fine, but worth noting if a "clear search" affordance is ever added. Also an initial empty onCommit("") fires ~200ms after mount — harmless no-op.

• Minor — slight staleness on the AI-search click path. trimmedQuery now derives from deferredQuery and is read by startAiSearch; under load a click could momentarily act on a marginally stale query. The test's waitFor covers it; real-world risk is low.

Overall good to go once the debounce-vs-deferred intent is clarified.