PublicationSkeleton.tsx47 lines · main

1	import { Switch, TableCell, TableRow } from 'ui'
2	import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
3
4	export interface PublicationSkeletonProps {
5	index?: number
6	}
7
8	export const PublicationSkeleton = ({ index }: PublicationSkeletonProps) => {
9	return (
10	<TableRow>
11	<TableCell style={{ width: '35%' }}>
12	<ShimmeringLoader className="h-4 w-24 my-0.5 p-0" delayIndex={index} />
13	</TableCell>
14	<TableCell className="hidden lg:table-cell" style={{ width: '15%' }}>
15	<ShimmeringLoader className="h-4 w-14 my-0.5 p-0" delayIndex={index} />
16	</TableCell>
17	{Array.from({ length: 4 }).map((_, i) => (
18	<TableCell key={i}>
19	<Switch size="small" checked={false} disabled={true} />
20	</TableCell>
21	))}
22	<TableCell className="px-4 py-3 pr-2">
23	<div className="flex justify-end">
24	<ShimmeringLoader className="h-6 w-12 p-0" delayIndex={index} />
25	</div>
26	</TableCell>
27	</TableRow>
28	)
29	}
30
31	export const PublicationTablesSkeleton = ({ index }: PublicationSkeletonProps) => {
32	return (
33	<TableRow>
34	<TableCell style={{ width: '35%' }}>
35	<ShimmeringLoader className="h-4 w-24 my-0.5 p-0" delayIndex={index} />
36	</TableCell>
37	<TableCell className="hidden lg:table-cell" style={{ width: '15%' }}>
38	<ShimmeringLoader className="h-4 w-14 my-0.5 p-0" delayIndex={index} />
39	</TableCell>
40	<TableCell className="px-4 py-3 pr-2">
41	<div className="flex">
42	<ShimmeringLoader className="h-6 w-12 p-0" delayIndex={index} />
43	</div>
44	</TableCell>
45	</TableRow>
46	)
47	}