1import { createDelayedStatus, type ShownStatus } from "@t3tools/client-runtime/delayed-status";
2import { useEffect, useState } from "react";
3
4/**
5 * Returns `value` only once it has lasted past the show delay, then holds it
6 * for a minimum time, so a short status never flashes. `key` is what the
7 * status belongs to (for example a thread). A new key drops it at once.
8 * Mobile has the same hook.
9 */
10export function useDelayedStatus<A>(key: string, value: A | null): A | null {
11 const [shown, setShown] = useState<ShownStatus<A> | null>(null);
12 const [status] = useState(() => createDelayedStatus<A>(setShown));
13 useEffect(() => () => status.dispose(), [status]);
14 useEffect(() => {
15 status.update(key, value);
16 }, [status, key, value]);
17 return shown?.key === key ? shown.value : null;
18}