Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | 1x 10x 10x 10x 3x 3x 4x 3x 3x 10x 7x 28x 21x | "use client"
import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { Loader2 } from "lucide-react"
import { useEffect, useState } from "react"
export default function LoadingPage() {
const [dots, setDots] = useState("")
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
const dotsInterval = setInterval(() => {
setDots((prev) => (prev.length >= 3 ? "" : prev + "."))
}, 500)
return () => {
clearInterval(dotsInterval)
}
}, [])
if (!mounted) return null
return (
<div className="min-h-screen bg-white dark:bg-slate-950 relative">
{/* Centered loading indicator */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="flex items-center space-x-3">
<Loader2 className="w-6 h-6 animate-spin text-slate-400 dark:text-slate-500" />
<div className="flex items-center">
<span className="text-slate-600 dark:text-slate-400 font-medium">Loading</span>
<span className="text-slate-600 dark:text-slate-400 font-medium w-6 text-left">{dots}</span>
</div>
</div>
</div>
{/* Background skeleton content */}
<div className="p-4 opacity-30">
<div className="w-full max-w-full mx-auto space-y-4">
{/* Header section */}
<Card className="p-4 border-slate-200 dark:border-slate-800 shadow-sm">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Skeleton className="h-10 w-10 rounded-full bg-slate-300" />
<div className="space-y-2">
<Skeleton className="h-4 w-24 bg-slate-300" />
<Skeleton className="h-3 w-16 bg-slate-300" />
</div>
</div>
<div className="flex items-center space-x-3">
<Skeleton className="h-8 w-20 rounded-md bg-slate-300" />
<Skeleton className="h-8 w-8 rounded-full bg-slate-300" />
</div>
</div>
</Card>
{/* Navigation */}
<Card className="p-3 border-slate-200 dark:border-slate-800 shadow-sm">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-6">
<Skeleton className="h-6 w-20 bg-slate-300" />
<Skeleton className="h-6 w-16 bg-slate-300" />
<Skeleton className="h-6 w-24 bg-slate-300" />
<Skeleton className="h-6 w-18 bg-slate-300" />
</div>
<div className="flex space-x-2">
<Skeleton className="h-6 w-6 rounded bg-slate-300" />
<Skeleton className="h-6 w-6 rounded bg-slate-300" />
</div>
</div>
</Card>
{/* Main content */}
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
{/* Primary content */}
<div className="lg:col-span-3">
<Card className="p-6 border-slate-200 dark:border-slate-800 shadow-sm">
<div className="space-y-4">
<Skeleton className="h-8 w-1/2 bg-slate-300" />
<div className="space-y-2">
<Skeleton className="h-3 w-full bg-slate-300" />
<Skeleton className="h-3 w-4/5 bg-slate-300" />
<Skeleton className="h-3 w-3/4 bg-slate-300" />
</div>
<Skeleton className="h-32 w-full rounded bg-slate-300" />
<div className="space-y-2">
<Skeleton className="h-3 w-full bg-slate-300" />
<Skeleton className="h-3 w-2/3 bg-slate-300" />
</div>
</div>
</Card>
</div>
{/* Sidebar */}
<div>
<Card className="p-4 border-slate-200 dark:border-slate-800 shadow-sm">
<div className="space-y-3">
<Skeleton className="h-4 w-16 bg-slate-300" />
<div className="space-y-2">
{[...Array(4)].map((_, i) => (
<div key={i} className="flex items-center space-x-2">
<Skeleton className="h-6 w-6 rounded-full bg-slate-300" />
<Skeleton className="h-3 w-full bg-slate-300" />
</div>
))}
</div>
</div>
</Card>
</div>
</div>
{/* Bottom cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{[...Array(3)].map((_, i) => (
<Card key={i} className="p-4 border-slate-200 dark:border-slate-800 shadow-sm">
<div className="space-y-3">
<Skeleton className="h-20 w-full rounded bg-slate-300" />
<div className="space-y-2">
<Skeleton className="h-3 w-full bg-slate-300" />
<Skeleton className="h-3 w-2/3 bg-slate-300" />
</div>
</div>
</Card>
))}
</div>
</div>
</div>
</div>
)
} |