'use client' import React, { useState, useEffect } from 'react' /** * @description Elegant branded loading screen with Anchor:23 logo reveal animation * @param {Object} props - Component props * @param {() => void} props.onComplete - Callback invoked when loading animation completes * @returns {JSX.Element} Full-screen loading overlay with animated logo and progress bar * @audit BUSINESS RULE: Loading screen provides brand consistency during app initialization * @audit SECURITY: Client-side only animation with no external data access * @audit Validate: onComplete callback triggers app state transition to loaded * @audit PERFORMANCE: Uses CSS animations for smooth GPU-accelerated transitions * @audit UI: Features SVG logo with clip-path reveal animation and gradient progress bar */ 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

)}
) }