Files
breakpilot-compliance/admin-compliance/app/sdk/multi-tenant/_components/LoadingSkeleton.tsx
Sharang Parnerkar dca0c96f2a refactor(admin): split multi-tenant page.tsx into colocated components
Extract types, constants, helpers, and UI pieces (LoadingSkeleton,
EmptyState, StatCard, ComplianceRing, Modal, TenantCard,
CreateTenantModal, EditTenantModal, TenantDetailModal) into
_components/ and _types.ts to bring page.tsx from 1663 LOC to
432 LOC (under the 500 hard cap). Behavior preserved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 22:47:59 +02:00

43 lines
1.6 KiB
TypeScript

'use client'
export function LoadingSkeleton() {
return (
<div className="space-y-8 animate-pulse">
{/* Header Skeleton */}
<div className="flex items-center justify-between">
<div>
<div className="h-8 w-80 bg-slate-200 rounded mb-2" />
<div className="h-4 w-56 bg-slate-200 rounded" />
</div>
<div className="flex gap-2">
<div className="h-10 w-10 bg-slate-200 rounded-lg" />
<div className="h-10 w-52 bg-slate-200 rounded-lg" />
</div>
</div>
{/* Stats Skeleton */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="bg-white rounded-xl border border-slate-200 p-5">
<div className="h-4 w-28 bg-slate-200 rounded mb-3" />
<div className="h-8 w-16 bg-slate-200 rounded" />
</div>
))}
</div>
{/* Cards Skeleton */}
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="bg-white rounded-xl border border-slate-200 p-5">
<div className="h-5 w-40 bg-slate-200 rounded mb-3" />
<div className="h-4 w-28 bg-slate-200 rounded mb-4" />
<div className="h-16 w-16 bg-slate-200 rounded-full mx-auto mb-4" />
<div className="space-y-2">
<div className="h-3 w-full bg-slate-200 rounded" />
<div className="h-3 w-3/4 bg-slate-200 rounded" />
</div>
</div>
))}
</div>
</div>
)
}