Description
In src/pages/app/ResourceHubPage.tsx, typing in the search bar updates the searchQuery state immediately on every keystroke. This causes heavy synchronous useMemo filtering and DOM layout recalculation across dozens of subject cards, notes, and previous year questions (PYQs).
We need to decouple the search input's immediate typing feedback from the catalog filtering logic using a ~300ms debounce.
Relevant files
src/pages/app/ResourceHubPage.tsx (Resource Hub search input and filtered catalog)
tests/unit/components.test.tsx (Component unit tests)
Requirements and acceptance criteria
-
Debounce logic:
- The search input text field must reflect user typing instantly without input lag.
- The filtering computation (
useMemo that filters rawResources and rawPYQs) must only execute after a 300ms pause in user typing.
- Use a lightweight custom
useDebounce hook or setTimeout/useRef timer.
-
Query reset and clear action:
- Clearing the search input (via backspace or clear button) must immediately reset the filtered view to the full catalog without unexpected delays.
- Existing semester and branch tab filters must remain fully functional and compose with the search query.
-
Empty state handling:
- When a search query matches zero resources or PYQs, display the existing friendly empty state:
"No matching resources found".
-
Testing:
- Add unit test coverage in
tests/unit/components.test.tsx verifying:
- Rapid keystrokes debounce filtering.
- Accurate results returned for valid search queries.
- Resetting the query restores all items.
- All tests must pass with
npm test.
Testing locally
npm test tests/unit/components.test.tsx
Description
In
src/pages/app/ResourceHubPage.tsx, typing in the search bar updates thesearchQuerystate immediately on every keystroke. This causes heavy synchronoususeMemofiltering and DOM layout recalculation across dozens of subject cards, notes, and previous year questions (PYQs).We need to decouple the search input's immediate typing feedback from the catalog filtering logic using a ~300ms debounce.
Relevant files
src/pages/app/ResourceHubPage.tsx(Resource Hub search input and filtered catalog)tests/unit/components.test.tsx(Component unit tests)Requirements and acceptance criteria
Debounce logic:
useMemothat filtersrawResourcesandrawPYQs) must only execute after a 300ms pause in user typing.useDebouncehook orsetTimeout/useReftimer.Query reset and clear action:
Empty state handling:
"No matching resources found".Testing:
tests/unit/components.test.tsxverifying:npm test.Testing locally
npm test tests/unit/components.test.tsx