Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTurn a loading flag into one that waits a short delay before showing and, once shown, stays on for a minimum time, so spinners never flash.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it to stop a spinner or skeleton from flashing for a fast request, and from vanishing a split second after it appeared.
Do not use it to slow down real work or to hide a long wait; it never makes the loading state last longer than the minimum.
import { useMinimumDuration } from "@/hooks/use-minimum-duration"const showSpinner = useMinimumDuration(isLoading, { delay: 200, minimum: 500 })useMinimumDuration(active: boolean, options?): boolean
| Option | Type | Default | Description |
|---|---|---|---|
delay | number | 150 | Wait this long before showing. If active ends first, nothing shows. |
minimum | number | 400 | Once shown, stay visible at least this long. |
The result is true only between the delayed start and the later of the real end and the minimum. Timers are cleared on unmount.
A hook has no markup. Keep the loading state exposed to assistive technology through aria-busy on the region and a visually hidden status text, so the delay does not hide that something is loading. Reduce motion on the spinner itself.
The hook ships with renderHook tests (use-minimum-duration.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.