monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): replace skeleton loaders with honest loading states

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-21 13:40:58 -05:00
parent 0ee4416077
commit 17037e4936
41 changed files with 101 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/fleet/FleetDashboard.tsx
View File

@@ -7,7 +7,7 @@ import { alertsApi } from '@/lib/alertsApi'
import { useEventStreamContext } from '@/contexts/EventStreamContext'
import { LayoutDashboard } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Skeleton } from '@/components/ui/skeleton'
import { LoadingText } from '@/components/ui/skeleton'
import { EmptyState } from '@/components/ui/empty-state'
// ─── Dashboard Widgets ───────────────────────────────────────────────────────
@@ -30,39 +30,12 @@ const REFRESH_OPTIONS: { label: string; value: RefreshInterval }[] = [
{ label: 'Off', value: false },
]
// ─── Dashboard Skeleton ──────────────────────────────────────────────────────
// ─── Dashboard Loading ───────────────────────────────────────────────────────
function DashboardSkeleton() {
function DashboardLoading() {
return (
<div className="space-y-4">
{/* KPI cards 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="rounded-lg border border-border p-4">
<Skeleton className="h-3 w-24 mb-2" />
<Skeleton className="h-8 w-16" />
</div>
))}
</div>
{/* Widget grid skeleton */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="lg:col-span-2 rounded-lg border border-border p-4 space-y-3">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-48 w-full" />
</div>
<div className="rounded-lg border border-border p-4 space-y-3">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-32 w-full" />
</div>
<div className="lg:col-span-2 rounded-lg border border-border p-4 space-y-3">
<Skeleton className="h-4 w-40" />
<Skeleton className="h-48 w-full" />
</div>
<div className="rounded-lg border border-border p-4 space-y-3">
<Skeleton className="h-4 w-28" />
<Skeleton className="h-32 w-full" />
</div>
</div>
<div className="py-8 text-center">
<LoadingText />
</div>
)
}
@@ -236,7 +209,7 @@ export function FleetDashboard() {
{/* ── Dashboard Content ───────────────────────────────────────────── */}
{fleetLoading ? (
<DashboardSkeleton />
<DashboardLoading />
) : totalDevices === 0 ? (
<EmptyState
icon={LayoutDashboard}