import * as React from "react"; import { cn } from "@/shared/lib/cn"; import { Button, type ButtonProps } from "@/shared/ui/button"; import { Spinner } from "@/shared/ui/spinner"; export type AsyncButtonState = "idle" | "pending" | "success" | "error"; type PendingVisual = "text" | "spinner" | "spinnerText"; interface AsyncButtonProps extends Omit { state: AsyncButtonState; idleLabel: React.ReactNode; pendingLabel?: React.ReactNode; successLabel?: React.ReactNode; errorLabel?: React.ReactNode; pendingDelayMs?: number; pendingVisual?: PendingVisual; preserveWidth?: boolean; } function getSpinnerClass(size: ButtonProps["size"]) { switch (size) { case "xs": case "sm": case "icon-xs": return "size-3"; case "lg": case "icon-lg": return "size-4"; default: return "size-3.5"; } } function AsyncButton({ state, idleLabel, pendingLabel = "Loading...", successLabel = "Done", errorLabel, pendingDelayMs = 250, pendingVisual = "text", preserveWidth = true, disabled, size, className, leftIcon, rightIcon, ...props }: AsyncButtonProps) { const [displayState, setDisplayState] = React.useState(state); React.useEffect(() => { if (state !== "pending") { setDisplayState(state); return; } if (pendingDelayMs <= 0) { setDisplayState("pending"); return; } const timer = window.setTimeout(() => { setDisplayState("pending"); }, pendingDelayMs); return () => window.clearTimeout(timer); }, [pendingDelayMs, state]); const spinnerClass = getSpinnerClass(size); const labels = { idle: idleLabel, pending: pendingLabel, success: successLabel, error: errorLabel ?? idleLabel, } satisfies Record; function renderStateContent( targetState: AsyncButtonState, isActive: boolean, ) { if (targetState === "pending") { if (pendingVisual === "spinner") { return isActive ? ( <> {labels.pending} ) : ( ); } if (pendingVisual === "spinnerText") { return ( <> {isActive ? ( ) : ( )} {labels.pending} ); } } return {labels[targetState]}; } const statesToRender = preserveWidth ? (["idle", "pending", "success", "error"] as const) : ([displayState] as const); return ( ); } export { AsyncButton };