import React, { useEffect, useState, useRef } from "react"; import { cn } from "@/lib/utils"; interface LoadingOverlayProps { visible: boolean; minDuration?: number; // Minimum display duration in milliseconds message?: string; showLogo?: boolean; className?: string; backgroundColor?: string; } export function LoadingOverlay({ visible, minDuration = 800, message, showLogo = true, className, backgroundColor, }: LoadingOverlayProps) { const [isShowing, setIsShowing] = useState(false); const [isFadingOut, setIsFadingOut] = useState(false); const [animationType, setAnimationType] = useState<'glitch' | 'breathe'>('glitch'); const showStartTimeRef = useRef(null); const minDurationTimerRef = useRef(null); useEffect(() => { if (visible) { // Randomly choose animation type setAnimationType(Math.random() > 0.5 ? 'glitch' : 'breathe'); // Start showing immediately setIsShowing(true); setIsFadingOut(false); showStartTimeRef.current = Date.now(); // Clear any existing timer if (minDurationTimerRef.current) { clearTimeout(minDurationTimerRef.current); minDurationTimerRef.current = null; } } else if (isShowing) { // Calculate how long it has been showing const elapsed = showStartTimeRef.current ? Date.now() - showStartTimeRef.current : 0; const remaining = Math.max(0, minDuration - elapsed); if (remaining > 0) { // Wait for minimum duration before hiding minDurationTimerRef.current = setTimeout(() => { setIsFadingOut(true); // Wait for fade-out animation to complete setTimeout(() => { setIsShowing(false); setIsFadingOut(false); showStartTimeRef.current = null; }, 300); // Match fade-out duration }, remaining); } else { // Minimum duration already passed, hide immediately setIsFadingOut(true); setTimeout(() => { setIsShowing(false); setIsFadingOut(false); showStartTimeRef.current = null; }, 300); } } return () => { if (minDurationTimerRef.current) { clearTimeout(minDurationTimerRef.current); minDurationTimerRef.current = null; } }; }, [visible, isShowing, minDuration]); if (!isShowing) { return null; } return ( <>
{animationType === 'glitch' ? ( <>
{/* TERMIX Glitch Text */}
TERMIX
{/* Scan line effect */}
{message && (

{message}

)}
) : ( <>
{/* Pulse rings */}
{/* Orbiting dots */}
{/* Particles */}
{/* TERMIX Breathe Text */}
T E R M I X
{message && (

{message}

)}
)}
); }