Spaces:
Sleeping
Sleeping
| 'use client'; | |
| import { motion } from 'framer-motion'; | |
| export default function LoadingScreen({ message = 'Preparing your interview...' }: { message?: string }) { | |
| return ( | |
| <div className="min-h-screen flex items-center justify-center"> | |
| <motion.div | |
| initial={{ opacity: 0, scale: 0.9 }} | |
| animate={{ opacity: 1, scale: 1 }} | |
| className="flex flex-col items-center gap-6" | |
| > | |
| {/* Animated brain icon */} | |
| <div className="relative"> | |
| <motion.div | |
| className="w-20 h-20 rounded-2xl flex items-center justify-center" | |
| style={{ background: 'var(--gradient-primary)' }} | |
| animate={{ | |
| scale: [1, 1.1, 1], | |
| rotate: [0, 5, -5, 0], | |
| }} | |
| transition={{ | |
| duration: 2, | |
| repeat: Infinity, | |
| ease: 'easeInOut', | |
| }} | |
| > | |
| <span className="text-3xl">🧠</span> | |
| </motion.div> | |
| {/* Orbiting dots */} | |
| {[0, 1, 2].map((i) => ( | |
| <motion.div | |
| key={i} | |
| className="absolute w-3 h-3 rounded-full" | |
| style={{ | |
| background: i === 0 ? 'var(--primary)' : i === 1 ? 'var(--secondary)' : 'var(--accent)', | |
| top: '50%', | |
| left: '50%', | |
| }} | |
| animate={{ | |
| x: [0, Math.cos((i * 120 * Math.PI) / 180) * 50, 0], | |
| y: [0, Math.sin((i * 120 * Math.PI) / 180) * 50, 0], | |
| opacity: [0.3, 1, 0.3], | |
| }} | |
| transition={{ | |
| duration: 2, | |
| repeat: Infinity, | |
| delay: i * 0.3, | |
| ease: 'easeInOut', | |
| }} | |
| /> | |
| ))} | |
| </div> | |
| {/* Loading text */} | |
| <div className="flex flex-col items-center gap-2"> | |
| <p className="text-lg font-medium" style={{ color: 'var(--foreground)' }}> | |
| {message} | |
| </p> | |
| <div className="typing-dots flex gap-1"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| {/* Progress shimmer */} | |
| <div className="w-64 h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--border)' }}> | |
| <motion.div | |
| className="h-full rounded-full" | |
| style={{ background: 'var(--gradient-primary)' }} | |
| animate={{ x: ['-100%', '100%'] }} | |
| transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }} | |
| /> | |
| </div> | |
| </motion.div> | |
| </div> | |
| ); | |
| } | |