index.tsx73 lines · main

1	import { forwardRef, type CSSProperties } from 'react'
2	import { Card, cn, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
3
4	export interface ShimmeringLoader {
5	className?: string
6	style?: CSSProperties
7	delayIndex?: number
8	animationDelay?: number
9	}
10
11	export const ShimmeringLoader = forwardRef<HTMLDivElement, ShimmeringLoader>(
12	({ className, style, delayIndex = 0, animationDelay = 150 }, ref) => {
13	return (
14	<div
15	ref={ref}
16	className={cn('shimmering-loader rounded-sm py-3', className)}
17	style={{
18	...style,
19	animationFillMode: 'backwards',
20	animationDelay: `${delayIndex * animationDelay}ms`,
21	}}
22	/>
23	)
24	}
25	)
26	ShimmeringLoader.displayName = 'ShimmeringLoader'
27
28	interface GenericSkeletonLoaderProps {
29	className?: string
30	}
31
32	export const GenericSkeletonLoader = ({ className }: GenericSkeletonLoaderProps) => (
33	<div className={cn(className, 'space-y-2')}>
34	<ShimmeringLoader />
35	<ShimmeringLoader className="w-3/4" />
36	<ShimmeringLoader className="w-1/2" />
37	</div>
38	)
39
40	export const GenericTableLoader = ({
41	headers = [],
42	numRows = 3,
43	}: {
44	headers?: (string | null)[]
45	numRows?: number
46	}) => {
47	return (
48	<Card>
49	<Table>
50	<TableHeader>
51	<TableRow>
52	{headers.length === 0 ? (
53	<TableHead />
54	) : (
55	headers.map((h, i) => <TableHead key={`${h}_${i}`}>{h}</TableHead>)
56	)}
57	</TableRow>
58	</TableHeader>
59	<TableBody>
60	{new Array(numRows).fill(0).map((_, i) => (
61	<TableRow key={`row_${i}`}>
62	<TableCell colSpan={headers.length}>
63	<ShimmeringLoader />
64	</TableCell>
65	</TableRow>
66	))}
67	</TableBody>
68	</Table>
69	</Card>
70	)
71	}
72
73	export default ShimmeringLoader