sarge/src/lib/components/assessment-flow/AssessmentSkeleton.tsx at bf95c3e6dd18b407696e24af146676a78fcf84ff · sandboxnu/sarge · GitHub

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
import { Skeleton } from '@/lib/components/ui/Skeleton';
import {
    ResizablePanelGroup,
    ResizablePanel,
    ResizableHandle,
} from '@/lib/components/ui/Resizable';
import { useMemo } from 'react';

export default function AssessmentSkeleton() {
    // generating random line widths for the skelton code lines
    const skeletonCodeLineWidths = useMemo(
        () => Array.from({ length: 16 }, () => `${Math.random() * 40 + 30}%`),
        []
    );

    return (
        <ResizablePanelGroup direction="horizontal" className="h-full">
            <ResizablePanel defaultSize={35} minSize={20}>
                <div className="flex h-full flex-col">
                    <div className="box-content shrink-0 px-5 pt-4 pb-2">
                        <Skeleton className="h-9 w-3/4 rounded-md" />
                    </div>
                    <div className="flex-1 space-y-3 overflow-hidden px-5 pt-1 pb-4">
                        <Skeleton className="h-4 w-full rounded" />
                        <Skeleton className="h-4 w-5/6 rounded" />
                        <Skeleton className="h-4 w-full rounded" />
                        <Skeleton className="h-4 w-4/6 rounded" />
                        <Skeleton className="h-4 w-full rounded" />
                        <Skeleton className="h-4 w-3/4 rounded" />
                        <div className="space-y-3 pt-2">
                            <Skeleton className="h-4 w-full rounded" />
                            <Skeleton className="h-4 w-5/6 rounded" />
                            <Skeleton className="h-4 w-full rounded" />
                        </div>
                    </div>
                </div>
            </ResizablePanel>

            <ResizableHandle className="bg-sarge-gray-200 w-px" />

            <ResizablePanel defaultSize={65} minSize={40}>
                <div className="flex h-full flex-col overflow-hidden bg-[#3a414f]">
                    <div className="min-h-0 flex-1 space-y-2 px-4 pt-4">
                        {skeletonCodeLineWidths.map((w, i) => (
                            <Skeleton key={i} className="h-4 rounded" style={{ width: w }} />
                        ))}
                    </div>
                    <div className="border-sarge-gray-200 flex items-center justify-between border-t bg-white px-4 py-3">
                        <div className="flex gap-2">
                            <Skeleton className="h-8 w-24 rounded-md" />
                        </div>
                        <div className="flex gap-2">
                            <Skeleton className="h-8 w-24 rounded-md" />
                            <Skeleton className="h-8 w-24 rounded-md" />
                        </div>
                    </div>
                </div>
            </ResizablePanel>
        </ResizablePanelGroup>
    );
}