'use client' import React, { useState, useEffect } from 'react' /** @description Elegant loading screen with Anchor 23 branding */ export function LoadingScreen({ onComplete }: { onComplete: () => void }) { const [progress, setProgress] = useState(0) const [showLogo, setShowLogo] = useState(false) const [isFadingOut, setIsFadingOut] = useState(false) useEffect(() => { // Simulate loading progress const progressInterval = setInterval(() => { setProgress(prev => { if (prev >= 100) { clearInterval(progressInterval) // Start fade out from center setIsFadingOut(true) // Complete after fade out animation setTimeout(() => onComplete(), 1000) return 100 } return prev + Math.random() * 12 + 8 // Faster progress }) }, 120) // Faster interval // Show logo with delay for fade in effect setTimeout(() => setShowLogo(true), 200) return () => { clearInterval(progressInterval) } }, [onComplete]) return (
{showLogo && (

ANCHOR:23

)}
) }