swadhinbiswas Initial release v0.1.0 · 1/16/2026
ed7a4e4
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
interface LoadingSkeletonProps {
variant?: 'card' | 'list' | 'text' | 'thread';
count?: number;
className?: string;
}
export default function LoadingSkeleton({
variant = 'card',
count = 1,
className = ''
}: LoadingSkeletonProps) {
const skeletons = Array.from({ length: count });
if (variant === 'card') {
return (
<>
{skeletons.map((_, i) => (
<div key={i} className={`skeleton rounded-lg ${className}`}>
<div className="aspect-video bg-dark-elevated mb-2" />
<div className="p-3 space-y-2">
<div className="h-4 bg-dark-elevated rounded w-3/4" />
<div className="h-3 bg-dark-elevated rounded w-full" />
<div className="h-3 bg-dark-elevated rounded w-2/3" />
</div>
</div>
))}
</>
);
}
if (variant === 'list') {
return (
<>
{skeletons.map((_, i) => (
<div key={i} className={`skeleton h-12 rounded-md mb-2 ${className}`} />
))}
</>
);
}
if (variant === 'text') {
return (
<>
{skeletons.map((_, i) => (
<div key={i} className={`skeleton h-4 rounded w-full mb-2 ${className}`} />
))}
</>
);
}
if (variant === 'thread') {
return (
<div className={`space-y-4 ${className}`}>
{/* OP Skeleton */}
<div className="skeleton rounded-lg p-4">
<div className="flex gap-4">
<div className="w-32 h-32 bg-dark-elevated rounded" />
<div className="flex-1 space-y-2">
<div className="h-4 bg-dark-elevated rounded w-1/4" />
<div className="h-4 bg-dark-elevated rounded w-full" />
<div className="h-4 bg-dark-elevated rounded w-3/4" />
</div>
</div>
</div>
{/* Reply Skeletons */}
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="skeleton rounded-lg p-4">
<div className="space-y-2">
<div className="h-3 bg-dark-elevated rounded w-1/4" />
<div className="h-3 bg-dark-elevated rounded w-full" />
<div className="h-3 bg-dark-elevated rounded w-2/3" />
</div>
</div>
))}
</div>
);
}
return null;
}