bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend loading imporvements

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-12-27 21:30:42 +01:00
parent 6e3a6590d6
commit 54662dde79
21 changed files with 799 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/components/dashboard/DashboardSkeleton.tsx Normal file
View File

@@ -0,0 +1,68 @@
import React from 'react';
export const DashboardSkeleton: React.FC = () => (
<div className="space-y-6 animate-pulse">
{/* System Status Block Skeleton */}
<div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
<div className="h-6 w-48 bg-[var(--bg-tertiary)] rounded mb-4" />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{[1, 2, 3, 4].map(i => (
<div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4">
<div className="h-4 w-32 bg-[var(--bg-tertiary)] rounded mb-2" />
<div className="h-8 w-16 bg-[var(--bg-tertiary)] rounded" />
</div>
))}
</div>
</div>
{/* Pending Purchases Skeleton */}
<div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
<div className="h-6 w-40 bg-[var(--bg-tertiary)] rounded mb-4" />
<div className="space-y-3">
{[1, 2, 3].map(i => (
<div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4 flex items-center justify-between">
<div className="flex-1">
<div className="h-5 w-48 bg-[var(--bg-tertiary)] rounded mb-2" />
<div className="h-4 w-32 bg-[var(--bg-tertiary)] rounded" />
</div>
<div className="flex gap-2">
<div className="h-10 w-20 bg-[var(--bg-tertiary)] rounded" />
<div className="h-10 w-20 bg-[var(--bg-tertiary)] rounded" />
</div>
</div>
))}
</div>
</div>
{/* Production Status Skeleton */}
<div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
<div className="h-6 w-44 bg-[var(--bg-tertiary)] rounded mb-4" />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{[1, 2, 3].map(i => (
<div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4">
<div className="h-4 w-36 bg-[var(--bg-tertiary)] rounded mb-3" />
<div className="h-6 w-24 bg-[var(--bg-tertiary)] rounded mb-2" />
<div className="h-4 w-28 bg-[var(--bg-tertiary)] rounded" />
</div>
))}
</div>
</div>
{/* Alerts Skeleton */}
<div className="bg-[var(--bg-secondary)] rounded-lg p-6 border border-[var(--border-primary)]">
<div className="h-6 w-32 bg-[var(--bg-tertiary)] rounded mb-4" />
<div className="space-y-3">
{[1, 2].map(i => (
<div key={i} className="bg-[var(--bg-primary)] rounded-lg p-4 flex items-start gap-3">
<div className="h-10 w-10 bg-[var(--bg-tertiary)] rounded-full flex-shrink-0" />
<div className="flex-1">
<div className="h-5 w-56 bg-[var(--bg-tertiary)] rounded mb-2" />
<div className="h-4 w-full bg-[var(--bg-tertiary)] rounded mb-2" />
<div className="h-4 w-3/4 bg-[var(--bg-tertiary)] rounded" />
</div>
</div>
))}
</div>
</div>
</div>
);