Skip to content

[FEATURE]: Add debounced search and query reset in Resource Hub #26

Description

@Hanu2908

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

  1. 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.
  2. 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.
  3. Empty state handling:

    • When a search query matches zero resources or PYQs, display the existing friendly empty state: "No matching resources found".
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: resource-hubAcademic notes, syllabus, and PYQ vaultenhancementNew feature or requesthelp wantedExtra attention is neededperformancePerformance optimizations and responsiveness

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions