Stateful Button

"use client";

import React, { useEffect, useRef } from "react";
import { Button } from "@/lab/aceternity/ui/stateful-button";

export default function StatefulButtonDemo() {
  const timers = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());

  useEffect(() => {
    const pending = timers.current;
    return () => pending.forEach(clearTimeout);
  }, []);

  // dummy API call
  const handleClick = () => {
    return new Promise((resolve) => {
      const t = setTimeout(() => {
        timers.current.delete(t);
        resolve(undefined);
      }, 4000);
      timers.current.add(t);
    });
  };

  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <Button onClick={handleClick}>Send message</Button>
    </div>
  );
}