Skip to content

Skip 400ms search throttle for in-memory autocomplete filtering#7434

Open
GeorgiZhelev wants to merge 1 commit into
Shopify:mainfrom
GeorgiZhelev:autocomplete-faster-local-search
Open

Skip 400ms search throttle for in-memory autocomplete filtering#7434
GeorgiZhelev wants to merge 1 commit into
Shopify:mainfrom
GeorgiZhelev:autocomplete-faster-local-search

Conversation

@GeorgiZhelev
Copy link
Copy Markdown
Contributor

WHY are these changes introduced?

Filtering inside renderAutocompletePrompt (e.g. the theme selector that appears for shopify theme push) feels noticeably laggy: there's a ~400ms gap between typing and seeing matching results update.

The cause is the throttle on the search callback in AutocompletePrompt (packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.tsx). The 400ms window makes sense for callers that supply a remote/paginated search (we don't want to hammer an API on every keystroke), but it also gates the default in-memory filter that renderAutocompletePrompt injects when the caller doesn't pass one — and that filter is fully synchronous (Promise.resolve(choices.filter(...))), so there's no I/O to throttle.

WHAT is this pull request doing?

  • Adds an optional searchDebounceMs prop to AutocompletePrompt, default 400 (backward-compatible).
  • renderAutocompletePrompt sets searchDebounceMs: 0 only when it's injecting its own default in-memory filter; if the caller supplied their own search, the default 400ms throttle still applies.
  • Adds a test asserting that searchDebounceMs={0} invokes the search callback on every keystroke (vs. coalescing to leading + trailing edges).

Net effect: prompts that filter against in-memory choices feel instant; remote/paginated consumers see no behavior change unless they opt in.

How to test your changes?

  1. Build the CLI: pnpm nx build cli
  2. From any theme directory, run a command that opens the theme selector — e.g. node packages/cli/bin/dev.js theme push
  3. Type into the search box; results should update on each keystroke instead of in ~400ms bursts.

Unit tests:

pnpm -F @shopify/cli-kit vitest run src/private/node/ui/components/AutocompletePrompt.test.tsx

Post-release steps

None.

Checklist

  • I've considered possible cross-platform impacts (Mac, Linux, Windows) — pure JS timing change, platform-agnostic.
  • I've considered possible documentation changes — JSDoc on the new prop covers it.
  • I've considered analytics changes to measure impact — none required.
  • The change is user-facing — I've added a patch changeset for @shopify/cli-kit.

@gonzaloriestra
Copy link
Copy Markdown
Contributor

Thanks for your contribution! Could you please rebase? The failing check should pass after that

@GeorgiZhelev GeorgiZhelev force-pushed the autocomplete-faster-local-search branch from 090f5c0 to 67745ee Compare May 12, 2026 07:13
@GeorgiZhelev
Copy link
Copy Markdown
Contributor Author

Hey, done!

Copy link
Copy Markdown
Contributor

@gonzaloriestra gonzaloriestra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, thanks!! It really feels much faster ⚡

'@shopify/cli-kit': patch
---

Make the autocomplete prompt feel instant when filtering against in-memory choices. The 400ms throttle on the search callback was designed for remote/paginated backends, but it also gated the default in-memory filter used by callers that don't supply their own `search` (e.g. the theme selector), producing a noticeable lag while typing. The prompt now exposes a `searchDebounceMs` prop, and `renderAutocompletePrompt` sets it to `0` when it injects its own synchronous filter. Custom remote-search consumers keep the existing 400ms throttle unless they opt out.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you mind simplifying here a bit?

Suggested change
Make the autocomplete prompt feel instant when filtering against in-memory choices. The 400ms throttle on the search callback was designed for remote/paginated backends, but it also gated the default in-memory filter used by callers that don't supply their own `search` (e.g. the theme selector), producing a noticeable lag while typing. The prompt now exposes a `searchDebounceMs` prop, and `renderAutocompletePrompt` sets it to `0` when it injects its own synchronous filter. Custom remote-search consumers keep the existing 400ms throttle unless they opt out.
Make the autocomplete prompt feel instant when filtering against in-memory choices.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants