useSlowTruth - React hook to throttle booleans

I use this React hook to reduce the display of spinner animation icons in cases where a little patience means we don't really need to bother indicating that something is loading. The problem For example, you might have a TanStack Query that makes XHR requests to the backend, and that backend is generally fast. Many times, it finishes in tens or hundreds of milliseconds. If you prescriptively always show the loading spinner icon, or whatever you might have, it's going to flicker and cause confusion. For example, your use of useQuery might look like this: function MyComponent() { const { data, isPending, error } = useQuery({ queryKey: ["something"], queryFn: fetcher, }) return <div> {isPending && <Spinner/>} {error && <Alert error={error}/>} {data && <Tabular data={data} />} </div> } The problem is that if isPending is only true for a very short time, you run the risk of displaying the <Spinner/> so briefly that it just becomes a flickering blur to the user. The solution The hook code…