hook delayedflag

---

type: Hook title: useDelayedFlag description: Delayed-flag helper that turns a boolean condition into a flag that flips true only after a 300 ms delay. tags: [frontend, react, hook, loading, skeleton, ux] timestamp: 2026-10-01T00:00:00Z

Delayed Flag Hook

useDelayedFlag turns a boolean condition into a delayed boolean flag. The returned flag stays false for 300 ms (default) and then flips to true; it resets to false as soon as the condition turns off.

Rationale

Use useDelayedFlag to defer transient UI such as a loading skeleton. Driven by query.isLoading, the flag implements the "skeleton only after 300 ms" rule so fast loads never flash a skeleton, while slow loads still get a placeholder. Rendering null during the delay window avoids the layout jump and flicker that an immediate skeleton causes.

Source References

• Source: frontend/src/hooks/useDelayedFlag/index.ts
• Tests: frontend/src/hooks/useDelayedFlag/index.unit.test.ts

Public Interface

Parameters

Name	Type	Required	Default	Description
active	boolean	yes	—	The condition being observed (for example query.isLoading).
delayMs	number	no	SKELETON_DELAY_MS (300)	How long active must hold before the flag turns on.

Returns

boolean — true once the condition has been active continuously for delayMs; false otherwise.

Exports

Name	Description
useDelayedFlag (default)	The delayed-flag hook.
SKELETON_DELAY_MS	300 ms delay constant; sub-300 ms responses complete before the timer fires.

Behavior

• A setTimeout starts when active becomes true and flips the flag after delayMs; the timer is cleared when active turns off.
• Re-arming happens during render whenever active toggles, following React's "adjust state when a prop changes" pattern. This keeps the effect free of synchronous setState calls.
• The flag re-applies the full delay when the condition restarts after turning off.

Examples

const showSkeleton = useDelayedFlag(isLoading);
return isLoading ? (showSkeleton ? <BlockDetailsSkeleton /> : null) : <Content />;

The ReportingUnitBlockDetails page uses this exact pattern to defer its Block Details Skeleton.

Known Constraints

• The flag is one-shot per activation — it does not progress through intermediate states.
• Test coverage uses fake timers (vi.advanceTimersByTime) to exercise the delay boundary at 299 ms and 300 ms.

Change Impact

• ReportingUnitBlockDetails — sole consumer; drives the skeleton deferral.

See Also

• ReportingUnitBlockDetails
• Block Details Skeleton
• Contexts and Hooks