kaneo (minimalist kanban) fork to experiment adding a tangled integration
github.com/usekaneo/kaneo
1import { cn } from "@/lib/cn";
2
3type LoadingSkeletonProps = {
4 className?: string;
5};
6
7export function LoadingSkeleton({ className }: LoadingSkeletonProps) {
8 return (
9 <div className={cn("flex w-full h-svh bg-sidebar", className)}>
10 <div className="w-64 bg-sidebar border-r border-border flex flex-col">
11 <div className="p-3 border-b border-border">
12 <div className="flex items-center gap-2">
13 <div className="w-8 h-8 bg-muted rounded animate-pulse" />
14 <div className="flex-1">
15 <div className="w-20 h-4 bg-muted rounded animate-pulse" />
16 </div>
17 </div>
18 </div>
19
20 <div className="flex-1 p-3 space-y-6">
21 <div className="space-y-2">
22 <div className="flex items-center gap-2">
23 <div className="w-6 h-6 bg-muted rounded-full animate-pulse" />
24 <div className="flex-1">
25 <div className="w-16 h-3 bg-muted rounded animate-pulse" />
26 </div>
27 </div>
28 </div>
29
30 <div className="space-y-1">
31 {["dashboard", "projects", "settings"].map((item) => (
32 <div
33 key={`nav-item-${item}`}
34 className="flex items-center gap-2 p-2 rounded"
35 >
36 <div className="w-4 h-4 bg-muted rounded animate-pulse" />
37 <div className="w-20 h-3 bg-muted rounded animate-pulse" />
38 </div>
39 ))}
40 </div>
41
42 <div className="space-y-2">
43 <div className="flex items-center gap-2">
44 <div className="w-3 h-3 bg-muted rounded animate-pulse" />
45 <div className="w-16 h-3 bg-muted rounded animate-pulse" />
46 </div>
47 <div className="ml-4 space-y-1">
48 {["issues", "projects", "views", "settings"].map((item) => (
49 <div
50 key={`workspace-item-${item}`}
51 className="flex items-center gap-2 p-1"
52 >
53 <div className="w-4 h-4 bg-muted rounded animate-pulse" />
54 <div className="w-16 h-3 bg-muted rounded animate-pulse" />
55 </div>
56 ))}
57 </div>
58 </div>
59 </div>
60
61 <div className="p-3 border-t border-border">
62 <div className="flex items-center gap-2">
63 <div className="w-6 h-6 bg-muted rounded-full animate-pulse" />
64 <div className="flex-1">
65 <div className="w-20 h-3 bg-muted rounded animate-pulse" />
66 </div>
67 </div>
68 </div>
69 </div>
70
71 <div className="flex-1 flex flex-col bg-card border border-border rounded-md m-2">
72 <div className="h-12 border-b border-border flex items-center px-4">
73 <div className="flex items-center gap-2">
74 <div className="w-6 h-6 bg-muted rounded animate-pulse" />
75 <div className="w-32 h-4 bg-muted rounded animate-pulse" />
76 </div>
77 </div>
78
79 <div className="flex-1 flex items-center justify-center">
80 <div className="text-center space-y-4">
81 <div className="w-16 h-16 bg-muted rounded-lg animate-pulse mx-auto" />
82 <div className="space-y-2">
83 <div className="w-48 h-4 bg-muted rounded animate-pulse mx-auto" />
84 <div className="w-64 h-3 bg-muted rounded animate-pulse mx-auto" />
85 </div>
86 </div>
87 </div>
88 </div>
89 </div>
90 );
91}