loading.tsx (8581B)
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 <main className="flex-1 container px-4 py-8 md:px-6 md:py-12"> 20 <div> 21 <div className="flex items-center justify-between mb-8"> 22 <Skeleton className="h-9 w-64" /> 23 <div className="hidden md:block"> 24 <Skeleton className="h-10 w-[400px]" /> 25 </div> 26 </div> 27 28 <div className="space-y-4"> 29 {/* Stats Cards */} 30 <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> 31 {Array(4) 32 .fill(0) 33 .map((_, i) => ( 34 <Card key={i} className="border-gray-800 bg-gray-950"> 35 <CardHeader className="pb-2"> 36 <Skeleton className="h-5 w-32" /> 37 </CardHeader> 38 <CardContent> 39 <Skeleton className="h-8 w-16 mb-2" /> 40 <Skeleton className="h-4 w-32" /> 41 </CardContent> 42 </Card> 43 ))} 44 </div> 45 46 {/* Heatmap Card */} 47 <Card className="border-gray-800 bg-gray-950"> 48 <CardHeader> 49 <div className="flex items-center justify-between"> 50 <div> 51 <Skeleton className="h-6 w-40 mb-2" /> 52 <Skeleton className="h-4 w-64" /> 53 </div> 54 <Skeleton className="h-10 w-[240px]" /> 55 </div> 56 </CardHeader> 57 <CardContent className="overflow-hidden"> 58 <Skeleton className="h-[300px] w-full" /> 59 </CardContent> 60 </Card> 61 62 {/* Two Column Charts */} 63 <div className="grid gap-4 md:grid-cols-2"> 64 <Card className="border-gray-800 bg-gray-950"> 65 <CardHeader> 66 <Skeleton className="h-6 w-40 mb-2" /> 67 <Skeleton className="h-4 w-56" /> 68 </CardHeader> 69 <CardContent> 70 <Skeleton className="h-[280px] w-full" /> 71 </CardContent> 72 </Card> 73 74 <Card className="border-gray-800 bg-gray-950"> 75 <CardHeader> 76 <Skeleton className="h-6 w-40 mb-2" /> 77 <Skeleton className="h-4 w-56" /> 78 </CardHeader> 79 <CardContent> 80 <Skeleton className="h-[280px] w-full" /> 81 </CardContent> 82 </Card> 83 </div> 84 85 {/* Two Column Charts */} 86 <div className="grid gap-4 md:grid-cols-2"> 87 <Card className="border-gray-800 bg-gray-950"> 88 <CardHeader> 89 <Skeleton className="h-6 w-40 mb-2" /> 90 <Skeleton className="h-4 w-56" /> 91 </CardHeader> 92 <CardContent> 93 <Skeleton className="h-[280px] w-full" /> 94 </CardContent> 95 </Card> 96 97 <Card className="border-gray-800 bg-gray-950"> 98 <CardHeader> 99 <Skeleton className="h-6 w-40 mb-2" /> 100 <Skeleton className="h-4 w-56" /> 101 </CardHeader> 102 <CardContent> 103 <Skeleton className="h-[220px] w-full mb-4" /> 104 <div className="flex items-center justify-center"> 105 <Skeleton className="h-9 w-48" /> 106 </div> 107 </CardContent> 108 </Card> 109 </div> 110 111 {/* Efficiency Card */} 112 <Card className="border-gray-800 bg-gray-950"> 113 <CardHeader> 114 <Skeleton className="h-6 w-48 mb-2" /> 115 <Skeleton className="h-4 w-64" /> 116 </CardHeader> 117 <CardContent> 118 <div className="grid gap-4 md:grid-cols-3"> 119 {Array(3) 120 .fill(0) 121 .map((_, i) => ( 122 <div key={i} className="space-y-2"> 123 <Skeleton className="h-5 w-40" /> 124 <div className="flex items-end gap-2"> 125 <Skeleton className="h-8 w-16" /> 126 <Skeleton className="h-4 w-32" /> 127 </div> 128 <Skeleton className="h-4 w-48" /> 129 </div> 130 ))} 131 </div> 132 133 <div className="mt-6"> 134 <Skeleton className="h-5 w-48 mb-4" /> 135 <div className="space-y-4"> 136 {Array(3) 137 .fill(0) 138 .map((_, i) => ( 139 <div key={i} className="flex items-center gap-3"> 140 <Skeleton className="h-8 w-8 rounded-full" /> 141 <div className="flex-1"> 142 <div className="flex items-center justify-between mb-1"> 143 <Skeleton className="h-5 w-32" /> 144 <Skeleton className="h-4 w-16" /> 145 </div> 146 <Skeleton className="h-1.5 w-full rounded-full" /> 147 </div> 148 </div> 149 ))} 150 </div> 151 </div> 152 </CardContent> 153 </Card> 154 </div> 155 </div> 156 </main> 157 </div> 158 159 ) 160 }