Denozordec
aa1779170a
CI / changes (push) Successful in 10s
CI / commitlint (push) Has been skipped
CI / openapi (push) Has been skipped
CI / web (push) Successful in 54s
CI / go (push) Successful in 1m3s
CI / bird2 (push) Successful in 20s
CI / release (push) Successful in 4m29s
Updated the Settings and Auth components to include better navigation handling by adding search parameters for tab selection. Enhanced the Access component to utilize badges for status indicators, improving visual clarity. Refactored the Schedule component to streamline job status display with badges, ensuring a more cohesive user experience. Additionally, integrated client directives in UI components for better performance.
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { Skeleton } from '@evobgp/ui/components/skeleton'
|
|
|
|
import { KpiStatGrid } from '@/components/kpi-stat-grid'
|
|
import { panelCardInsetClassName } from '@/components/panel-card'
|
|
import {
|
|
chartPanelGridClassName,
|
|
dashboardMainSidebarClassName,
|
|
} from '@/lib/ui-surface'
|
|
|
|
export function KpiStatGridSkeleton({ count = 4 }: { count?: number }) {
|
|
return (
|
|
<KpiStatGrid
|
|
items={Array.from({ length: count }, (_, index) => ({
|
|
id: `kpi-skeleton-${index}`,
|
|
icon: <Skeleton className="size-4 rounded-sm" />,
|
|
value: <Skeleton className="h-8 w-16" />,
|
|
label: <Skeleton className="h-4 w-28" />,
|
|
footer: <Skeleton className="h-5 w-32 rounded-full" />,
|
|
}))}
|
|
aria-label="Загрузка показателей"
|
|
/>
|
|
)
|
|
}
|
|
|
|
/** @deprecated Use KpiStatGridSkeleton */
|
|
export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
|
|
return <KpiStatGridSkeleton count={count} />
|
|
}
|
|
|
|
/** Matches dashboard layout: KPI row, charts, main+sidebar, bottom grids. */
|
|
export function AnalyticsDashboardSkeleton() {
|
|
return (
|
|
<div className="@container flex flex-col gap-4">
|
|
<KpiStatGridSkeleton count={6} />
|
|
|
|
<div className={chartPanelGridClassName}>
|
|
<Skeleton className="h-72 w-full rounded-xl" />
|
|
<Skeleton className="h-72 w-full rounded-xl" />
|
|
</div>
|
|
|
|
<div className={dashboardMainSidebarClassName}>
|
|
<Skeleton className="h-96 w-full rounded-xl xl:col-span-8" />
|
|
<Skeleton className="h-96 w-full rounded-xl xl:col-span-4" />
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<Skeleton className="h-64 w-full rounded-xl" />
|
|
<Skeleton className="h-64 w-full rounded-xl" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function KpiSparklineSkeleton({ count = 4 }: { count?: number }) {
|
|
return <KpiStatGridSkeleton count={count} />
|
|
}
|
|
|
|
export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
|
|
return (
|
|
<div className="overflow-hidden rounded-xl ring-1 ring-foreground/10">
|
|
<div className="flex flex-col">
|
|
<div className={`flex gap-2 border-b ${panelCardInsetClassName}`}>
|
|
{Array.from({ length: cols }).map((_, i) => (
|
|
<Skeleton className="h-4 flex-1" key={`h-${i}`} />
|
|
))}
|
|
</div>
|
|
{Array.from({ length: rows }).map((_, r) => (
|
|
<div className={`flex gap-2 border-b ${panelCardInsetClassName}`} key={`r-${r}`}>
|
|
{Array.from({ length: cols }).map((_, c) => (
|
|
<Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|