Action status button
One action that moves through saving, success, and retryable error states.
Implementation
1"use client";2 3import { useEffect, useRef, useState } from "react";4import { Check, X } from "lucide-react";5 6export type ActionStatusButtonProps = {7 onAction: () => Promise<unknown> | unknown;8 idleLabel?: string;9 loadingLabel?: string;10 successLabel?: string;11 errorLabel?: string;12 resetDelay?: number;13};14 15type ActionState = "idle" | "loading" | "success" | "error";16 17/** One action with progress, success, and retryable error feedback. */18export function ActionStatusButton({19 onAction,20 idleLabel = "Save changes",21 loadingLabel = "Saving…",22 successLabel = "Saved",23 errorLabel = "Try again",24 resetDelay = 2200,25}: ActionStatusButtonProps) {26 const [state, setState] = useState<ActionState>("idle");27 const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);28