4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tc47,"use client"; import { Check, Loader2, X } from "lucide-react"; import { motion } from "motion/react"; import * as React from "react"; import { buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type AsyncButtonVariant = "default" | "secondary" | "outline" | "ghost"; type AsyncButtonStatus = "idle" | "loading" | "success" | "error"; export interface AsyncButtonProps extends React.ButtonHTMLAttributes { variant?: AsyncButtonVariant; status?: AsyncButtonStatus; progress?: number; resetDelay?: number; onReset?: () => void; successIcon?: React.ReactNode; errorIcon?: React.ReactNode; } export const AsyncButton = ({ children, variant = "default", status = "idle", progress, resetDelay = 2000, onReset, successIcon = , errorIcon = , className, disabled, ...props }: AsyncButtonProps) => { const isLoading = status === "loading"; const isResult = status === "success" || status === "error"; React.useEffect(() => { if (!isResult) return; const timer = window.setTimeout(() => onReset?.(), resetDelay); return () => clearTimeout(timer); }, [isResult, resetDelay, onReset]); const showProgress = isLoading && progress !== undefined; return ( ); }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["utils","button"]}]]}],["$","$L50",null,{"sourceUrl":"https://shadcnblocks.com/r/button-button-async-3.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/button-button-async-3","itemId":"@shadcnblocks/button-button-async-3"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"example/button/button-async-3.tsx","content":"\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\n\nimport { AsyncButton } from \"@/components/shadcnblocks/async-button\";\n\nexport const title = \"Async with progress\";\n\ntype Status = \"idle\" | \"loading\" | \"success\" | \"error\";\n\nconst Example = () => {\n const [status, setStatus] = useState(\"idle\");\n const [progress, setProgress] = useState(0);\n const intervalRef = useRef>();\n\n const handleClick = useCallback(() => {\n setStatus(\"loading\");\n setProgress(0);\n intervalRef.current = setInterval(() => {\n setProgress((p) => {\n if (p >= 100) {\n clearInterval(intervalRef.current);\n setStatus(\"success\");\n return 100;\n }\n return p + 10;\n });\n }, 200);\n }, []);\n\n return (\n setStatus(\"idle\")}\n onClick={handleClick}\n >\n Upload\n \n );\n};\n\nexport default Example;\n","type":"registry:block"},{"path":"components/shadcnblocks/async-button.tsx","content":"$52","type":"registry:component","target":""}]}]]}],"$L53"]}]

Button Async 3 Async With Progress

Installation

Files

components

Styles