"use client"; import * as m from "motion/react-m"; import { useEffect, useRef, useState } from "react"; import { toast } from "sonner"; import "./style.css"; const HOLD_DURATION = 2000; const SUCCESS_VISIBLE_DURATION = 1200; export default function HoldToDeleteButtonDemo() { const [isCompleted, setIsCompleted] = useState(false); const holdTimerRef = useRef | null>(null); const successTimerRef = useRef | null>(null); const handlePointerDown = () => { if (isCompleted) return; cancelHold(); holdTimerRef.current = setTimeout(() => { setIsCompleted(true); }, HOLD_DURATION); }; const cancelHold = () => { if (holdTimerRef.current) clearTimeout(holdTimerRef.current); holdTimerRef.current = null; }; const resetState = () => { cancelHold(); if (successTimerRef.current) clearTimeout(successTimerRef.current); successTimerRef.current = null; setIsCompleted(false); }; // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { if (!isCompleted) return; toast.success("Successfully deleted"); successTimerRef.current = setTimeout(() => { resetState(); }, SUCCESS_VISIBLE_DURATION); return () => { if (successTimerRef.current) clearTimeout(successTimerRef.current); successTimerRef.current = null; }; }, [isCompleted]); // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect( () => () => { cancelHold(); if (successTimerRef.current) clearTimeout(successTimerRef.current); }, [], ); return (

Hold To Delete Button ); }