loading.tsx (5905B)
1 import { Skeleton } from "@/components/ui/skeleton" 2 import { Card, CardContent, CardHeader } from "@/components/ui/card" 3 import Link from "next/link" 4 import { Shield } from "lucide-react" 5 6 export default function Loading() { 7 return ( 8 <div className="flex min-h-screen flex-col bg-black text-white"> 9 <header className="sticky top-0 z-10 border-b border-gray-800 bg-black/80 backdrop-blur-sm"> 10 <div className="container flex h-16 items-center justify-between px-4 md:px-6"> 11 <div className="flex items-center gap-4"> 12 <Link href="/" className="flex items-center gap-2"> 13 <Shield className="h-6 w-6 text-purple-400" /> 14 <span className="text-xl font-bold tracking-tighter">Draupnir4All</span> 15 </Link> 16 </div> 17 </div> 18 </header> 19 20 <main className="flex-1 container px-4 py-8 md:px-6 md:py-12"> 21 <div> 22 <div className="flex items-center justify-between mb-8"> 23 <Skeleton className="h-9 w-64" /> 24 <div className="hidden md:block"> 25 <Skeleton className="h-10 w-[400px]" /> 26 </div> 27 </div> 28 29 <div className="space-y-8"> 30 {/* Stats Cards */} 31 <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> 32 {Array(4) 33 .fill(0) 34 .map((_, i) => ( 35 <Card key={i} className="border-gray-800 bg-gray-950"> 36 <CardHeader className="pb-2"> 37 <Skeleton className="h-5 w-32" /> 38 </CardHeader> 39 <CardContent> 40 <Skeleton className="h-8 w-16 mb-2" /> 41 <div className="flex justify-between items-center"> 42 <Skeleton className="h-4 w-32" /> 43 <Skeleton className="h-6 w-24" /> 44 </div> 45 </CardContent> 46 </Card> 47 ))} 48 </div> 49 50 {/* Two Column Cards */} 51 <div className="grid gap-4 md:grid-cols-2"> 52 <Card className="border-gray-800 bg-gray-950"> 53 <CardHeader> 54 <Skeleton className="h-6 w-40 mb-2" /> 55 <Skeleton className="h-4 w-56" /> 56 </CardHeader> 57 <CardContent> 58 <div className="space-y-4"> 59 {Array(3) 60 .fill(0) 61 .map((_, i) => ( 62 <div key={i} className="flex items-start gap-4"> 63 <Skeleton className="h-8 w-8 rounded-full" /> 64 <div className="space-y-1 flex-1"> 65 <Skeleton className="h-5 w-32" /> 66 <Skeleton className="h-4 w-full" /> 67 <Skeleton className="h-4 w-24" /> 68 </div> 69 </div> 70 ))} 71 </div> 72 </CardContent> 73 </Card> 74 75 <Card className="border-gray-800 bg-gray-950"> 76 <CardHeader> 77 <div className="flex items-center justify-between"> 78 <div> 79 <Skeleton className="h-6 w-40 mb-2" /> 80 <Skeleton className="h-4 w-56" /> 81 </div> 82 <Skeleton className="h-9 w-24" /> 83 </div> 84 </CardHeader> 85 <CardContent> 86 <div className="space-y-4"> 87 {Array(4) 88 .fill(0) 89 .map((_, i) => ( 90 <div key={i} className="flex items-center justify-between"> 91 <div className="flex items-center gap-2"> 92 <Skeleton className="h-2 w-2 rounded-full" /> 93 <Skeleton className="h-5 w-40" /> 94 </div> 95 <Skeleton className="h-7 w-7 rounded-md" /> 96 </div> 97 ))} 98 </div> 99 </CardContent> 100 </Card> 101 </div> 102 </div> 103 </div> 104 </main> 105 </div> 106 ) 107 }