86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { Package, Sparkles } from 'lucide-react'
|
|
|
|
export default function PublicLoading() {
|
|
return (
|
|
<div className="min-h-[60vh] flex items-center justify-center px-4">
|
|
<div className="text-center">
|
|
{/* Compact Loading Animation */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-6"
|
|
>
|
|
<div className="relative mx-auto w-20 h-20 mb-4">
|
|
{/* Spinner */}
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{
|
|
duration: 1.5,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
className="absolute inset-0 border-3 border-emerald-200 border-t-emerald-600 rounded-full"
|
|
/>
|
|
|
|
{/* Center icon */}
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.1, 1]
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
className="absolute inset-2 flex items-center justify-center bg-white rounded-full shadow-sm"
|
|
>
|
|
<Package className="w-8 h-8 text-emerald-600" />
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Loading Text */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
>
|
|
<div className="flex items-center justify-center space-x-2 text-emerald-600 font-medium">
|
|
<Sparkles className="w-4 h-4" />
|
|
<span>Loading...</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Subtle animated dots */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.4 }}
|
|
className="flex justify-center space-x-1 mt-3"
|
|
>
|
|
{[0, 1, 2].map((index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="w-2 h-2 bg-emerald-400 rounded-full"
|
|
animate={{
|
|
scale: [1, 1.3, 1],
|
|
opacity: [0.4, 1, 0.4]
|
|
}}
|
|
transition={{
|
|
duration: 1.2,
|
|
repeat: Infinity,
|
|
delay: index * 0.15,
|
|
ease: "easeInOut"
|
|
}}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|