EditorMenuListSkeleton.tsx25 lines · main

1	import { memo } from 'react'
2	import { Skeleton } from 'ui'
3
4	const EditorMenuListSkeleton = memo(function EditorMenuListSkeleton() {
5	const items = [
6	{ width: 'w-40', opacity: 'opacity-100' },
7	{ width: 'w-32', opacity: 'opacity-100' },
8	{ width: 'w-20', opacity: 'opacity-75' },
9	{ width: 'w-40', opacity: 'opacity-50' },
10	{ width: 'w-20', opacity: 'opacity-25' },
11	]
12
13	return (
14	<div className="px-4 flex flex-col gap-0">
15	{items.map((item, index) => (
16	<div key={index} className={`flex flex-row h-6 items-center gap-3 ${item.opacity}`}>
17	<Skeleton className="h-4 w-5" />
18	<Skeleton className={`h-4 ${item.width}`} />
19	</div>
20	))}
21	</div>
22	)
23	})
24
25	export default EditorMenuListSkeleton