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>
);

22
frontend/src/components/layout/Sidebar/Sidebar.tsx
View File

@@ -185,7 +185,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
// Get subscription-aware navigation routes
const baseNavigationRoutes = useMemo(() => getNavigationRoutes(), []);
const { filteredRoutes: subscriptionFilteredRoutes } = useSubscriptionAwareRoutes(baseNavigationRoutes);
const { filteredRoutes: subscriptionFilteredRoutes, isLoading: subscriptionLoading } = useSubscriptionAwareRoutes(baseNavigationRoutes);
// Map route paths to translation keys
const getTranslationKey = (routePath: string): string => {
@@ -845,9 +845,23 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
{/* Navigation */}
<nav className={clsx('flex-1 overflow-y-auto overflow-x-hidden', isCollapsed ? 'px-1 py-4' : 'p-4')}>
<ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
{filteredItems.map(item => renderItem(item))}
</ul>
{subscriptionLoading ? (
/* Skeleton loading state while subscription data is loading */
<ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
{[1, 2, 3, 4, 5].map(i => (
<li key={i} className="animate-pulse">
<div className={clsx(
'rounded-lg bg-[var(--bg-tertiary)]',
isCollapsed ? 'h-10 w-10' : 'h-10 w-full'
)} />
</li>
))}
</ul>
) : (
<ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
{filteredItems.map(item => renderItem(item))}
</ul>
)}
</nav>
{/* Profile section */}