You are working on an e-commerce dashboard that features an interactive product catalog search. To prevent excessive rendering and avoid spamming simulated API requests on every single keystroke, the search field must be debounced.
The Bug / Unimplemented Behavior
The current implementation in src/ProductSearch.jsx updates the search query instantly on every keystroke, causing rapid UI recalibrations and immediate filtering. Furthermore, the search bar fails to clean up active timers when unmounted or when fast consecutive inputs occur.
Requirements
- Implement Debounced Search State:
- Create a 300ms debounce delay for the search input.
- As the user types into the text input (
data-testid="search-input"), update the searchTerm immediately in the input field to maintain responsive typing UI.
- Update the filtered products list only after 300ms of inactivity since the last keystroke.
- Timer Cleanup:
- Ensure any active debounce timer is properly cleaned up on component unmount or when the search input changes before the 300ms timer expires.
- Product Filtering Logic:
- Filter the products imported from
src/products.js by matching the debounced search term against product names or categories (case-insensitive search).
- Render filtered products in the list container (
data-testid="product-list"). Each product item should display its name, category, and price.
- If no products match the debounced term, render a "No products found" message (
data-testid="no-products").
- Status Indicator:
- While waiting for the 300ms debounce delay after a user types, display a searching indicator with text
"Searching..." (data-testid="search-status").
- Once the debounced term updates, hide the status indicator.
Files to Modify