peter
ad921f0233
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.
14 lines
581 B
TypeScript
14 lines
581 B
TypeScript
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;
|
|
}
|