button-loading-demo

1"use client";
2
3import { useEffect, useState } from "react";
4
5import { Button } from "@/registry/pure-ui/ui/button";
6import { Spinner } from "@/registry/pure-ui/ui/spinner";
7
8export function ButtonLoadingDemo() {
9  const [isPending, setIsPending] = useState(false);
10
11  useEffect(() => {
12    isPending && setTimeout(() => setIsPending(false), 2000);
13  }, [isPending]);
14
15  return (
16    <Button disabled={isPending} onClick={() => setIsPending(true)}>
17      {isPending ? <Spinner size="sm" /> : null}
18      {isPending ? "Submitting..." : "Submit"}
19    </Button>
20  );
21}