loading.tsx (4307B)
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 {/* Tab Navigation Skeleton */} 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 <Card className="border-gray-800 bg-gray-950"> 30 <CardHeader> 31 <div className="flex items-center justify-between"> 32 <Skeleton className="h-6 w-32 mb-1" /> 33 <Skeleton className="h-9 w-24" /> {/* Add Ban button */} 34 </div> 35 <Skeleton className="h-4 w-64" /> 36 </CardHeader> 37 <CardContent> 38 <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> 39 {/* Policy Lists Column */} 40 <div className="space-y-4"> 41 <Skeleton className="h-5 w-32" /> 42 <div className="space-y-2"> 43 {Array(3) 44 .fill(0) 45 .map((_, i) => ( 46 <div key={i} className="p-3 rounded-md border border-gray-800 space-y-2"> 47 <div className="flex items-center justify-between mb-1"> 48 <Skeleton className="h-5 w-32" /> 49 <Skeleton className="h-4 w-4" /> {/* Edit icon */} 50 </div> 51 <Skeleton className="h-4 w-full" /> 52 <Skeleton className="h-4 w-16" /> 53 </div> 54 ))} 55 </div> 56 </div> 57 58 {/* Ban Entries Columns (spans 2 columns) */} 59 <div className="md:col-span-2 space-y-4"> 60 <div className="flex items-center justify-between"> 61 <Skeleton className="h-5 w-32" /> 62 <div className="flex items-center gap-2"> 63 <Skeleton className="h-8 w-[200px]" /> {/* Search input */} 64 <Skeleton className="h-8 w-[120px]" /> {/* Filter dropdown */} 65 </div> 66 </div> 67 <Skeleton className="h-[400px] w-full rounded-md border border-gray-800" /> {/* Ban entries list */} 68 </div> 69 </div> 70 </CardContent> 71 </Card> 72 </div> 73 </main> 74 </div> 75 76 ) 77 }