src/app/loading.tsx

import { Loader2 } from "lucide-react"

export default function RootLoading() {
    return (
        <div className="flex items-center justify-center min-h-[60vh]">
            <div className="text-center space-y-4">
                <div className="relative">
                    <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-primary to-purple-500 flex items-center justify-center mx-auto shadow-lg shadow-primary/25 animate-pulse">
                        <svg className="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                        </svg>
                    </div>
                </div>
                <Loader2 className="h-6 w-6 animate-spin text-primary mx-auto" />
                <p className="text-muted-foreground text-sm">Loading...</p>
            </div>
        </div>
    )
}