From a22e77c4ebdde83c73caa83dfb8c9ee2a7089961 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 17 Oct 2025 23:07:01 +0200
Subject: [PATCH] feat: enhance ClientLibraryPage loading state with improved
 skeleton structure and remove deprecated loading component

---
 .../[libraryId]/ClientLibraryPage.tsx         | 38 +++++++++++++--
 src/app/libraries/[libraryId]/loading.tsx     | 46 -------------------
 src/styles/globals.css                        |  2 +-
 3 files changed, 34 insertions(+), 52 deletions(-)
 delete mode 100644 src/app/libraries/[libraryId]/loading.tsx

diff --git a/src/app/libraries/[libraryId]/ClientLibraryPage.tsx b/src/app/libraries/[libraryId]/ClientLibraryPage.tsx
index b0c8a85..92655a3 100644
--- a/src/app/libraries/[libraryId]/ClientLibraryPage.tsx
+++ b/src/app/libraries/[libraryId]/ClientLibraryPage.tsx
@@ -151,15 +151,43 @@ export function ClientLibraryPage({
   if (loading) {
     return (
       <Container>
-        <div className="flex items-center justify-between">
-          <OptimizedSkeleton className="h-10 w-64" />
-          <OptimizedSkeleton className="h-10 w-10 rounded-full" />
+        {/* Section header avec titre + actions */}
+        <div className="space-y-4 mb-8">
+          <div className="flex items-center justify-between">
+            <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" />
+            </div>
+          </div>
         </div>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+
+        {/* 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) => (
-            <OptimizedSkeleton key={i} className="aspect-[3/4] w-full rounded" />
+            <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>
       </Container>
     );
   }
diff --git a/src/app/libraries/[libraryId]/loading.tsx b/src/app/libraries/[libraryId]/loading.tsx
deleted file mode 100644
index 949662a..0000000
--- a/src/app/libraries/[libraryId]/loading.tsx
+++ /dev/null
@@ -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>
-  );
-}
-
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ab98bc4..e7a0370 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -68,7 +68,7 @@ body {
     --secondary: 217.2 32.6% 17.5%;
     --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%;
 
     --accent: 217.2 32.6% 17.5%;