Status Button

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5 
6import { Button } from "@/components/ui/button";
7import { cn } from "@/lib/utils";
8 
9type ButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
10type ButtonClickEvent = Parameters<NonNullable<ButtonProps["onClick"]>>[0];
11type ButtonState = "idle" | "loading" | "success";
12 
13export type StatusButtonProps = Omit<ButtonProps, "children" | "onClick"> & {
14  idleLabel?: React.ReactNode;
15  loadingLabel?: React.ReactNode;
16  successLabel?: React.ReactNode;
17  loadingDuration?: number;
18  successDuration?: number;
19  onClick?: (event: ButtonClickEvent) => void | Promise<void>;
20};
21 
22function Spinner({ className }: { className?: string }) {
23  return (
24    <span
25      aria-hidden="true"
26      className={cn(
27        "size-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70",
28        className
29      )}
30    />
31  );
32}
33 
34export function StatusButton({
35  idleLabel = "Send me a login link",
36  loadingLabel = <Spinner />,
37  successLabel = "Login link sent!",
38  loadingDuration = 1750,
39  successDuration = 1750,
40  disabled,
41  className,
42  onClick,
43  type = "button",
44  ...props
45}: StatusButtonProps) {
46  const [buttonState, setButtonState] = React.useState<ButtonState>("idle");
47  const shouldReduceMotion = useReducedMotion();
48  const timers = React.useRef<ReturnType<typeof setTimeout>[]>([]);
49  const isMountedRef = React.useRef(true);
50 
51  React.useEffect(() => {
52    isMountedRef.current = true;
53    return () => {
54      isMountedRef.current = false;
55      timers.current.forEach(clearTimeout);
56    };
57  }, []);
58 
59  const clearTimers = React.useCallback(() => {
60    timers.current.forEach(clearTimeout);
61    timers.current = [];
62  }, []);
63 
64  const handleClick = React.useCallback(
65    async (event: ButtonClickEvent) => {
66      if (buttonState !== "idle") return;
67 
68      setButtonState("loading");
69      clearTimers();
70 
71      try {
72        await onClick?.(event);
73      } catch {
74        if (!isMountedRef.current) return;
75        setButtonState("idle");
76        return;
77      }
78 
79      if (!isMountedRef.current) return;
80 
81      timers.current = [
82        setTimeout(() => {
83          setButtonState("success");
84        }, loadingDuration),
85        setTimeout(() => {
86          setButtonState("idle");
87        }, loadingDuration + successDuration),
88      ];
89    },
90    [buttonState, clearTimers, loadingDuration, onClick, successDuration]
91  );
92 
93// … truncated