julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance ClientLibraryPage loading state with improved skeleton structure and remove deprecated loading component

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-17 23:07:01 +02:00
parent 7a70a2fb9f
commit a22e77c4eb
3 changed files with 34 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/libraries/[libraryId]/ClientLibraryPage.tsx
View File

@@ -151,15 +151,43 @@ export function ClientLibraryPage({
if (loading) { if (loading) {
return ( return (
<Container> <Container>
{/* Section header avec titre + actions */}
<div className="space-y-4 mb-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<OptimizedSkeleton className="h-10 w-64" /> <OptimizedSkeleton className="h-8 w-64" />
<div className="flex items-center gap-2">
<OptimizedSkeleton className="h-5 w-48" />
<OptimizedSkeleton className="h-10 w-10 rounded-full" /> <OptimizedSkeleton className="h-10 w-10 rounded-full" />
</div> </div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> </div>
</div>
{/* Filters */}
<div className="flex flex-col gap-4 mb-8">
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<div className="w-full">
<OptimizedSkeleton className="h-10 w-full" />
</div>
<div className="flex items-center justify-end gap-2">
<OptimizedSkeleton className="h-10 w-24" />
<OptimizedSkeleton className="h-10 w-10 rounded" />
<OptimizedSkeleton className="h-10 w-10 rounded" />
</div>
</div>
</div>
{/* Grid */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
{Array.from({ length: effectivePageSize }).map((_, i) => ( {Array.from({ length: effectivePageSize }).map((_, i) => (
<OptimizedSkeleton key={i} className="aspect-[3/4] w-full rounded" /> <OptimizedSkeleton key={i} className="aspect-[2/3] w-full rounded-lg" />
))} ))}
</div> </div>
{/* Pagination */}
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
<OptimizedSkeleton className="h-5 w-32 order-2 sm:order-1" />
<OptimizedSkeleton className="h-10 w-64 order-1 sm:order-2" />
</div>
</Container> </Container>
); );
} }

46
src/app/libraries/[libraryId]/loading.tsx
View File

@@ -1,46 +0,0 @@
import { OptimizedSkeleton } from "@/components/skeletons/OptimizedSkeletons";
export default function LibraryLoading() {
return (
<div className="container py-8 space-y-8">
{/* Header avec titre + compteur + refresh */}
<div className="flex items-center justify-between">
<OptimizedSkeleton className="h-10 w-64" />
<div className="flex items-center gap-2">
<OptimizedSkeleton className="h-5 w-48" />
<OptimizedSkeleton className="h-10 w-10 rounded-full" />
</div>
</div>
{/* Filters section */}
<div className="space-y-8">
<div className="flex flex-col gap-4">
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<div className="w-full">
<OptimizedSkeleton className="h-10 w-full" />
</div>
<div className="flex items-center justify-end gap-2">
<OptimizedSkeleton className="h-10 w-24" />
<OptimizedSkeleton className="h-10 w-10 rounded" />
<OptimizedSkeleton className="h-10 w-10 rounded" />
</div>
</div>
</div>
{/* Grid */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
{Array.from({ length: 20 }).map((_, i) => (
<OptimizedSkeleton key={i} className="aspect-[2/3] w-full rounded-lg" />
))}
</div>
{/* Pagination */}
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
<OptimizedSkeleton className="h-5 w-32 order-2 sm:order-1" />
<OptimizedSkeleton className="h-10 w-64 order-1 sm:order-2" />
</div>
</div>
</div>
);
}

2
src/styles/globals.css
View File

@@ -68,7 +68,7 @@ body {
--secondary: 217.2 32.6% 17.5%; --secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%; --secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%; --muted: 217.2 32.6% 25%;
--muted-foreground: 215 20.2% 65.1%; --muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%; --accent: 217.2 32.6% 17.5%;