a42d9e0d1d
- DeveloperDashboardViewSkeleton: premium skeleton for loading state - EmptyState for API keys when none exist (variant card, Create action) - ErrorDisplay with retry on fetch failure - Header: duration-[var(--duration-fast)] on all interactive elements - DeveloperDashboardView: table row hover, copy button transitions Co-authored-by: Cursor <cursoragent@cursor.com>
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
/** Skeleton for DeveloperDashboardView — stats + keys table + docs. */
|
|
export function DeveloperDashboardViewSkeleton() {
|
|
return (
|
|
<div className="space-y-8 pb-20 max-w-layout-content mx-auto">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row justify-between items-end gap-4 border-b border-border/50 pb-6">
|
|
<div>
|
|
<Skeleton className="h-9 w-56 mb-2" />
|
|
<Skeleton className="h-4 w-48" />
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<Skeleton className="h-10 w-36 rounded-full" />
|
|
<Skeleton className="h-10 w-32 rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-2 mb-8">
|
|
<Skeleton className="h-10 flex-1 rounded-lg" />
|
|
<Skeleton className="h-10 flex-1 rounded-lg" />
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-28 rounded-xl" />
|
|
))}
|
|
</div>
|
|
|
|
{/* Keys table */}
|
|
<Skeleton className="h-64 w-full rounded-xl" />
|
|
|
|
<span className="sr-only">Chargement du portail développeur...</span>
|
|
</div>
|
|
);
|
|
}
|