{
  "name": "pending-wrapper-demo",
  "type": "registry:example",
  "registryDependencies": [
    "pending",
    "button"
  ],
  "files": [
    {
      "path": "examples/pending-wrapper-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Pending } from \"@/registry/bases/radix/components/pending\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\n\nexport default function PendingWrapperDemo() {\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n\n  const onSubmit = React.useCallback(() => {\n    setIsSubmitting(true);\n    // Simulate API call\n    setTimeout(() => {\n      setIsSubmitting(false);\n    }, 2000);\n  }, []);\n\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <Pending isPending={isSubmitting}>\n        <Button onClick={onSubmit}>\n          {isSubmitting && <Loader2 className=\"size-4 animate-spin\" />}\n          {isSubmitting ? \"Submitting...\" : \"Submit with Wrapper\"}\n        </Button>\n      </Pending>\n\n      <p className=\"text-sm text-muted-foreground\">\n        Using the <code className=\"text-xs\">{\"<Pending>\"}</code> wrapper\n        component\n      </p>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}