{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-delayed-loading",
  "title": "useDelayedLoading",
  "description": "Shows a loading state only when work is actually slow, then keeps it up long enough that it never flickers.",
  "files": [
    {
      "path": "hooks/use-delayed-loading.ts",
      "content": "import * as React from \"react\"\n\ntype DelayedLoadingOptions = {\n  delay?: number\n  minDuration?: number\n}\n\nfunction useDelayedLoading(\n  loading: boolean,\n  { delay = 150, minDuration = 400 }: DelayedLoadingOptions = {}\n) {\n  const [visible, setVisible] = React.useState(false)\n  const shownAt = React.useRef(0)\n\n  React.useEffect(() => {\n    if (loading === visible) {\n      return\n    }\n    if (loading) {\n      const timer = setTimeout(\n        () => {\n          shownAt.current = Date.now()\n          setVisible(true)\n        },\n        Math.max(0, delay)\n      )\n      return () => clearTimeout(timer)\n    }\n    const remaining = Math.max(0, minDuration - (Date.now() - shownAt.current))\n    const timer = setTimeout(() => setVisible(false), remaining)\n    return () => clearTimeout(timer)\n  }, [loading, visible, delay, minDuration])\n\n  return visible\n}\n\nexport { useDelayedLoading }\nexport type { DelayedLoadingOptions }\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}