fix(feed): stop search-box flicker (keepPreviousData + debounced query)
Typing in the search box changed the feed/count/facets query keys on every keystroke, so each query dropped to its loading state and blanked the content — the whole feed area flickered. Debounce the search term feeding the queries (the input still updates instantly) so they only re-run after a pause, and keep previous results on screen during a refetch via placeholderData: keepPreviousData, so the feed and tag counts update in place without blanking.
This commit is contained in:
parent
8b19faaed1
commit
74cf31b58d
3 changed files with 35 additions and 8 deletions
13
frontend/src/lib/useDebounced.ts
Normal file
13
frontend/src/lib/useDebounced.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
// Returns `value` after it has stopped changing for `delay` ms. Lets a text input stay
|
||||
// responsive (it owns the immediate value) while the query it drives only re-runs once the
|
||||
// user pauses — so we don't refetch the feed on every keystroke.
|
||||
export function useDebounced<T>(value: T, delay = 300): T {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const id = window.setTimeout(() => setDebounced(value), delay);
|
||||
return () => window.clearTimeout(id);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue