72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { Card, CardContent } from '@/shared/ui/card'
|
|
import { Skeleton } from '@/shared/ui/skeleton'
|
|
|
|
/** Строк в составе хранилища заранее не знаем — берём типичное число, чтобы не пустовала карточка. */
|
|
const AREA_ROWS = 5
|
|
|
|
/**
|
|
* Скелетон панели хранилища: подсчёт размеров идёт по диску и занимает секунды. Повторяет вёрстку
|
|
* {@link StoragePanel} блок в блок, чтобы после загрузки ничего не переехало.
|
|
*/
|
|
export function StoragePanelSkeleton() {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4" role="status" aria-label={t('common.loading')}>
|
|
<Card>
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="flex flex-col gap-1.5">
|
|
<Skeleton className="h-4 w-24" />
|
|
<Skeleton className="h-3 w-56" />
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Skeleton className="h-3 w-32" />
|
|
<Skeleton className="h-8 w-28 rounded-md" />
|
|
</div>
|
|
</div>
|
|
|
|
<Skeleton className="h-4 w-full rounded-full" />
|
|
|
|
<div className="grid gap-3 text-sm sm:grid-cols-4">
|
|
{Array.from({ length: 4 }, (_, i) => (
|
|
<div key={i} className="flex flex-col gap-1.5">
|
|
<Skeleton className="h-3 w-20" />
|
|
<Skeleton className="h-5 w-24" />
|
|
<Skeleton className="h-3 w-12" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="flex flex-wrap items-baseline justify-between gap-2">
|
|
<Skeleton className="h-4 w-36" />
|
|
<Skeleton className="h-3 w-40" />
|
|
</div>
|
|
|
|
<Skeleton className="h-3 w-full rounded-full" />
|
|
|
|
<div className="flex flex-col divide-y divide-border">
|
|
{Array.from({ length: AREA_ROWS }, (_, i) => (
|
|
<div key={i} className="flex flex-wrap items-center gap-x-3 gap-y-1 py-2">
|
|
<Skeleton className="h-3 w-3 shrink-0" />
|
|
<div className="flex min-w-48 flex-col gap-1.5">
|
|
<Skeleton className="h-4 w-32" />
|
|
<Skeleton className="h-3 w-44" />
|
|
</div>
|
|
<Skeleton className="ml-auto h-4 w-20" />
|
|
<Skeleton className="h-3 w-14" />
|
|
<Skeleton className="h-3 w-24" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|