Skip to content

fix(search): lock in SearchBar debouncing with tests, configurable delay + instant clear - #629

Merged
nonsobethel0-dev merged 2 commits into
Parashield-Protocol:mainfrom
davidishere1:fix/528-debounce-search
Sep 23, 2026
Merged

nonsobethel0-dev merged 2 commits into
Parashield-Protocol:mainfrom
davidishere1:fix/528-debounce-search

Conversation

@davidishere1

@davidishere1 davidishere1 commented Sep 23, 2026 •

Copy link
Copy Markdown

Context

The issue says SearchBar calls onSearch on every keystroke, re-filtering the product list each time. On current main that's no longer the case. SearchBar already debounces with useDebounce(query, 250), added in 93b4375, and the homepage passes the stable setSearchQuery setter as onSearch, so the effect doesn't fire on unrelated renders.

What was missing:

  • No test covers the debounce. The existing SearchBar tests only check static markup, so a regression back to per-keystroke searching would pass CI.
  • The delay was hard-coded.
  • The clear (✕) button waited out the full debounce before resetting results, which added a delay to a deliberate action.

Changes

src/components/SearchBar.tsx

  • New optional debounceMs prop, default 250 so current behaviour is unchanged. The issue suggests ~200ms; the existing 250ms is kept to avoid visible churn, and callers can now tune it.
  • The clear button calls onSearch('') right away as well as resetting the input, so the full product list comes back instantly.

src/__tests__/SearchBar.test.tsx

New behavioural tests using fake timers:

  • Five fast keystrokes, 100ms apart, produce no onSearch calls while typing and exactly one call with the final value ('flood') once the debounce window passes.
  • A custom debounceMs={500} is respected.
  • The clear button fires onSearch('') immediately and empties the input.

Verification

Expose a debounceMs prop (default 250ms) instead of a hard-coded delay,
and make the clear button reset results immediately rather than waiting
out the debounce window.
Existing tests only checked static markup. Add behavioral tests proving
rapid keystrokes collapse into one onSearch call, custom debounceMs is
honoured, and clearing fires onSearch('') immediately.
@drips-wave

drips-wave Bot commented Sep 23, 2026

Copy link
Copy Markdown

@davidishere1 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@netlify

netlify Bot commented Sep 23, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for boisterous-sunshine-dd4c4c failed.

Name Link
🔨 Latest commit eb9a2cb
🔍 Latest deploy log https://app.netlify.com/projects/boisterous-sunshine-dd4c4c/deploys/6ab4226327a29d000892821b

@nonsobethel0-dev
nonsobethel0-dev merged commit ac48550 into Parashield-Protocol:main Sep 23, 2026
0 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

3 participants