Skip to content

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

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

Skip 400ms search throttle for in-memory autocomplete filtering#7434
GeorgiZhelev wants to merge 1 commit intoShopify: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.

@GeorgiZhelev GeorgiZhelev requested review from a team as code owners April 30, 2026 09:13
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.

1 participant