RoleRowSkeleton.tsx42 lines · main

1	import { ChevronUp } from 'lucide-react'
2	import { cn } from 'ui'
3	import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
4
5	export interface RoleRowSkeletonProps {
6	index?: number
7	}
8
9	export const RoleRowSkeleton = ({ index }: RoleRowSkeletonProps) => {
10	return (
11	<div
12	className={cn([
13	'bg-surface-100',
14	'data-open:bg-selection',
15	'border-default',
16	'data-open:border-strong',
17	'data-open:pb-px col-span-12 mx-auto',
18	'-space-y-px overflow-hidden',
19	'border border-t-0 first:border-t first:mt-0! shadow-sm transition',
20	'first:rounded-tl first:rounded-tr',
21	'last:rounded-bl last:rounded-br',
22	])}
23	>
24	<div className="flex w-full items-center justify-between rounded-sm py-3 px-6 text-foreground">
25	<div className="flex items-start space-x-3">
26	<ChevronUp
27	id="collapsible-trigger"
28	className="text-border-stronger rotate-180"
29	strokeWidth={2}
30	width={14}
31	/>
32	<div className="space-x-2 flex items-center">
33	<ShimmeringLoader className="h-4 w-20 py-0 my-0.5" delayIndex={index} />
34	<ShimmeringLoader className="h-4 w-16 py-0 my-0.5" delayIndex={index} />
35	</div>
36	</div>
37
38	<ShimmeringLoader className="h-4 w-[90px] py-0 my-0.5" delayIndex={index} />
39	</div>
40	</div>
41	)
42	}