Keep catalog filtering responsive
Keep controlled filter input immediately responsive while deferring expensive catalog filtering and ignoring obsolete results.Description
Requirements
Export ResponsiveCatalogFilters from src/App.tsx.
Update the visible query field synchronously for every edit.
Run filterProducts from a deferred query/category value rather than blocking the input update.
Display results for the latest deferred filter state and never a superseded state.
Expose the current filtered result count in a named status region.
Expose visible status and interactive controls with native semantics, accessible names, and keyboard operation appropriate to the workflow.
Do not mutate props, nested caller-owned values, or arrays supplied to the component.
Fast typing
Type camera quickly into a large catalog
The input reflects every character while results may lag
Update the visible query field synchronously for every edit.
Clear query
Clear the query before the prior filter completes
Only unfiltered results become visible
Run filterProducts from a deferred query/category value rather than blocking the input update.
Constraints
Use React state and effects only where the observable component contract requires themUse injected adapters instead of accessing network, storage, timers, or browser globals directlyKeep one authoritative state transition for each user or adapter event
Hints
Hint 1
Start with the urgent-input behavior and make its observable result deterministic.
Hint 2
Model deferred-filtering independently before combining it with the remaining states.
Hint 3
Verify the boundary described by accurate-result-count without changing caller-owned input.