Skip to content

SearchFilter: debounce input to fix typing flicker (#274)#321

Merged
ptrlrd merged 1 commit into
mainfrom
fix/search-flicker-debounce
May 22, 2026
Merged

SearchFilter: debounce input to fix typing flicker (#274)#321
ptrlrd merged 1 commit into
mainfrom
fix/search-flicker-debounce

Conversation

@ptrlrd
Copy link
Copy Markdown
Owner

@ptrlrd ptrlrd commented May 21, 2026

Closes #274.

Root cause

Every keystroke in the cards/relics/potions/etc. search box triggered:

  1. setSearch (state update)
  2. router.replace (URL update)
  3. useEffect deps include search → API fetch
  4. New cards arrive → another re-render

That cascade produced the visible flicker while typing.

Fix

Decoupled the <input> value from the upstream search prop. A local draft state advances on every keystroke (instant feedback), and the consumer's onSearchChange only fires 200ms after typing stabilizes. External search prop changes (URL → state sync, clear-filter buttons) still flow back into the draft.

Implemented inside SearchFilter.tsx so all 9 consumers (cards, relics, potions, powers, events, encounters, enchantments, guides, browse) inherit the fix without touching their wiring.

Uses a ref to hold the latest onSearchChange callback so the debounce timer isn't reset by parent re-renders that produce fresh inline arrow functions.

@ptrlrd ptrlrd merged commit dcaf93d into main May 22, 2026
5 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

Development

Successfully merging this pull request may close these issues.

[Bug] When typing in a card/potion/etc there is a light flicker on rerender

1 participant