137 lines
4.0 KiB
TypeScript
Vendored
137 lines
4.0 KiB
TypeScript
Vendored
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { VIEW_MODES, type ViewMode } from '../constants'
|
|
|
|
export interface LoadingSkeletonProps {
|
|
viewMode?: ViewMode
|
|
}
|
|
|
|
export function LoadingSkeleton(props: LoadingSkeletonProps) {
|
|
const viewMode = props.viewMode ?? VIEW_MODES.CARD
|
|
|
|
return (
|
|
<div className='space-y-5'>
|
|
<div className='space-y-1.5'>
|
|
<Skeleton className='h-8 w-40' />
|
|
<Skeleton className='h-4 w-52' />
|
|
</div>
|
|
<Skeleton className='h-10 w-full rounded-lg' />
|
|
<FilterBarSkeleton />
|
|
{viewMode === VIEW_MODES.TABLE ? (
|
|
<TableContentSkeleton />
|
|
) : (
|
|
<CardContentSkeleton />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CardContentSkeleton() {
|
|
return (
|
|
<div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
|
|
{Array.from({ length: 9 }).map((_, i) => (
|
|
<div key={i} className='rounded-xl border p-5'>
|
|
<div className='flex items-start justify-between gap-3'>
|
|
<div className='flex min-w-0 items-start gap-3'>
|
|
<Skeleton className='size-10 shrink-0 rounded-xl' />
|
|
<div className='min-w-0 flex-1 space-y-2'>
|
|
<Skeleton className='h-5 w-36' />
|
|
<Skeleton className='h-3.5 w-48' />
|
|
</div>
|
|
</div>
|
|
<Skeleton className='h-8 w-16 rounded-md' />
|
|
</div>
|
|
<div className='mt-4 space-y-2'>
|
|
<Skeleton className='h-3.5 w-full' />
|
|
<Skeleton className='h-3.5 w-4/5' />
|
|
</div>
|
|
<div className='mt-4 flex items-center gap-2'>
|
|
<Skeleton className='h-4 w-24' />
|
|
<Skeleton className='h-4 w-16' />
|
|
</div>
|
|
<div className='mt-2 flex items-center gap-3'>
|
|
<Skeleton className='h-3.5 w-14' />
|
|
<Skeleton className='h-3.5 w-14' />
|
|
<Skeleton className='h-3.5 w-8' />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function FilterBarSkeleton() {
|
|
return (
|
|
<div className='space-y-3'>
|
|
<div className='flex items-center gap-3'>
|
|
<div className='flex flex-1 flex-wrap items-center gap-2'>
|
|
{[80, 90, 75, 85, 70].map((width, i) => (
|
|
<Skeleton
|
|
key={i}
|
|
className='h-8 rounded-full'
|
|
style={{ width: `${width}px` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className='flex items-center gap-2'>
|
|
<Skeleton className='h-8 w-24 rounded-lg' />
|
|
<Skeleton className='h-8 w-20 rounded-lg' />
|
|
<Skeleton className='h-8 w-24' />
|
|
<Skeleton className='h-8 w-20 rounded-lg' />
|
|
</div>
|
|
</div>
|
|
<Skeleton className='h-5 w-24' />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TableContentSkeleton() {
|
|
const columns = [
|
|
{ width: 200 },
|
|
{ width: 100 },
|
|
{ width: 100 },
|
|
{ width: 100 },
|
|
{ width: 80 },
|
|
{ width: 100 },
|
|
]
|
|
|
|
return (
|
|
<div className='space-y-4'>
|
|
<div className='overflow-hidden rounded-lg border'>
|
|
<div className='bg-muted/30 border-b px-4 py-3'>
|
|
<div className='flex items-center gap-4'>
|
|
{columns.map((col, i) => (
|
|
<Skeleton
|
|
key={i}
|
|
className='h-4'
|
|
style={{ width: `${col.width}px` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{Array.from({ length: 10 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className='flex items-center gap-4 border-b px-4 py-3 last:border-b-0'
|
|
>
|
|
{columns.map((col, j) => (
|
|
<Skeleton
|
|
key={j}
|
|
className='h-5'
|
|
style={{ width: `${col.width}px` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Skeleton className='h-5 w-32' />
|
|
<div className='flex items-center gap-2'>
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Skeleton key={i} className='size-8' />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|