Monorepo for wisp.place. A static site hosting service built on top of the AT Protocol.
wisp.place
nekomimi.pet
1import {
2 Card,
3 CardContent,
4 CardDescription,
5 CardHeader,
6 CardTitle
7} from '@public/components/ui/card'
8
9// Shimmer animation for skeleton loading
10const Shimmer = () => (
11 <div className="animate-pulse">
12 <div className="h-4 bg-muted rounded w-3/4 mb-2"></div>
13 <div className="h-4 bg-muted rounded w-1/2"></div>
14 </div>
15)
16
17const SkeletonLine = ({ className = '' }: { className?: string }) => (
18 <div className={`animate-pulse bg-muted rounded ${className}`}></div>
19)
20
21export function TabSkeleton() {
22 return (
23 <div className="space-y-4 min-h-[400px]">
24 <Card>
25 <CardHeader>
26 <div className="space-y-2">
27 <SkeletonLine className="h-6 w-1/3" />
28 <SkeletonLine className="h-4 w-2/3" />
29 </div>
30 </CardHeader>
31 <CardContent className="space-y-4">
32 {/* Skeleton content items */}
33 <div className="p-4 border border-border rounded-lg">
34 <SkeletonLine className="h-5 w-1/2 mb-3" />
35 <SkeletonLine className="h-4 w-3/4 mb-2" />
36 <SkeletonLine className="h-4 w-2/3" />
37 </div>
38 <div className="p-4 border border-border rounded-lg">
39 <SkeletonLine className="h-5 w-1/2 mb-3" />
40 <SkeletonLine className="h-4 w-3/4 mb-2" />
41 <SkeletonLine className="h-4 w-2/3" />
42 </div>
43 <div className="p-4 border border-border rounded-lg">
44 <SkeletonLine className="h-5 w-1/2 mb-3" />
45 <SkeletonLine className="h-4 w-3/4 mb-2" />
46 <SkeletonLine className="h-4 w-2/3" />
47 </div>
48 </CardContent>
49 </Card>
50
51 <Card>
52 <CardHeader>
53 <div className="space-y-2">
54 <SkeletonLine className="h-6 w-1/4" />
55 <SkeletonLine className="h-4 w-1/2" />
56 </div>
57 </CardHeader>
58 <CardContent className="space-y-3">
59 <SkeletonLine className="h-10 w-full" />
60 <SkeletonLine className="h-4 w-3/4" />
61 </CardContent>
62 </Card>
63 </div>
64 )
65}