Cache search index in query and show skeleton while typing

[Mbeaulne]

Description

Improves search responsiveness by showing a skeleton loading state immediately when the user starts typing, preventing the UI from performing expensive sorting and searching operations on keystrokes that haven't yet committed to a query transition.

A new isSearching flag is set as soon as the local input value diverges from the committed query. While isSearching is true, the active query is treated as empty, sorted index computation is skipped, and the results area renders a skeleton. Once the debounced commit fires, isSearching is cleared and the real results appear.

The pauseSearch option is threaded into useComponentSearchV2State so the editor-side component search panel gets the same behaviour.

The hydration query now builds and caches the search index (IndexEntry[]) alongside the hydrated references, so expensive index derivation is tied to the library fingerprint cache rather than recomputed on every render. The library fingerprint now includes source kind, id, and label so cache entries correctly invalidate when the source set changes.

Pre-computed token and phrase caches (searchableTokens, searchablePhrases) are stored on each IndexEntry at index-build time, eliminating repeated tokenization and regex work on every keystroke inside scoreEntry.

Search suggestions are now only computed when there are no lexical or collection matches and rerank is not active, avoiding unnecessary work when results are already present.

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 component search panel or dashboard components view.
2. Begin typing a search query and observe that a skeleton loading state appears immediately while typing.
3. Stop typing and confirm that results appear correctly after the debounce period.
4. Verify that source filter toggles still correctly filter results.
5. Confirm that AI rerank and embedding search continue to function as expected.

Additional Comments

The buildSourcedHydratedReferences helper is no longer needed and has been removed. The hydration query now pairs each hydrated reference with its source directly, making the post-hydration join step unnecessary.

[github-actions]

🎩 Preview

A preview build has been created at: 06-29-fix_production_slowness/29023ff

[Mbeaulne]

• Add per-query field boost directives to lexical search #2472
• Cache search index in query and show skeleton while typing #2471 👈 (View in Graphite)
• Add source filter bar to editor component search #2470
• Add source to component search v1 and v2 #2469
• Add editor component search loading skeleton #2468
• Reduce lexical search result limit and field weights #2467
• master

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

[graphite-app]

Race condition: isSearching state can be incorrectly cleared

Same race condition as in DashboardComponentsV2View. When rapid typing occurs, setIsSearching(false) in the transition callback can execute after new input has been entered, causing the skeleton to disappear prematurely.

This component uses a debounced input component, so the race window may be even wider since there's both debouncing and transition timing involved.

Fix: The callbacks need to verify the current input value before clearing isSearching. Since this component uses DebouncedComponentSearchInput, you'll need to either:

1. Pass a ref to access the current input value, or
2. Track the expected committed value and only clear isSearching when it matches

const [expectedCommit, setExpectedCommit] = useState("");

const handleQueryCommit = (value: string) => {
  setExpectedCommit(value);
  startSearchTransition(() => {
    setQuery(value);
    setIsSearching(false);
  });
};

const handleLocalQueryChange = (value: string) => {
  setIsSearching(value.trim() !== expectedCommit.trim());
};

Spotted by Graphite



Is this helpful? React 👍 or 👎 to let us know.

[camielvs]

I loaded up v2 editor and did nothing else. The component library sat in loading state for about 30s. I presume it's indexing? Didn't happen again when refreshing, but does happen when loading a different pipeline. Also happens in v1 editor.

[Mbeaulne]

I'm not seeing any loading states on local or Prod:

local

july_8.mov (uploaded via Graphite)

Prodjul_8_prod.mov (uploaded via Graphite)

[camielvs]

Issue appears to be on master branch, not this PR

[Mbeaulne]

Merge activity

• Jul 8, 4:41 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jul 8, 4:41 PM UTC: Graphite rebased this pull request as part of a merge.
• Jul 8, 4:46 PM UTC: @Mbeaulne merged this pull request with Graphite.