From 470391601d815b558ff64fe9f637e5930ec22211 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 17 Oct 2025 11:16:22 +0200
Subject: [PATCH] feat: add loading skeleton components for Library and Series
 pages to enhance user experience during data fetching

---
 src/app/libraries/[libraryId]/loading.tsx | 46 +++++++++++++++++++
 src/app/series/[seriesId]/loading.tsx     | 56 +++++++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 src/app/libraries/[libraryId]/loading.tsx
 create mode 100644 src/app/series/[seriesId]/loading.tsx

diff --git a/src/app/libraries/[libraryId]/loading.tsx b/src/app/libraries/[libraryId]/loading.tsx
new file mode 100644
index 0000000..949662a
--- /dev/null
+++ b/src/app/libraries/[libraryId]/loading.tsx
@@ -0,0 +1,46 @@
+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/app/series/[seriesId]/loading.tsx b/src/app/series/[seriesId]/loading.tsx
new file mode 100644
index 0000000..ad76577
--- /dev/null
+++ b/src/app/series/[seriesId]/loading.tsx
@@ -0,0 +1,56 @@
+import { OptimizedSkeleton } from "@/components/skeletons/OptimizedSkeletons";
+
+export default function SeriesLoading() {
+  return (
+    <div className="container">
+      {/* Series Header */}
+      <div className="relative min-h-[300px] md:h-[300px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden bg-muted/50">
+        <div className="relative container mx-auto px-4 py-8">
+          <div className="flex flex-col md:flex-row gap-6 items-center md:items-start w-full">
+            {/* Cover */}
+            <OptimizedSkeleton className="w-[180px] aspect-[2/3] rounded-lg flex-shrink-0" />
+
+            {/* Info */}
+            <div className="flex-1 space-y-4 text-center md:text-left w-full max-w-xl">
+              <OptimizedSkeleton className="h-8 w-64 mx-auto md:mx-0" />
+              <OptimizedSkeleton className="h-16 w-full" />
+              <div className="flex items-center gap-4 justify-center md:justify-start flex-wrap">
+                <OptimizedSkeleton className="h-6 w-24 rounded-full" />
+                <OptimizedSkeleton className="h-6 w-20" />
+                <OptimizedSkeleton className="h-10 w-10 rounded" />
+                <OptimizedSkeleton className="h-10 w-10 rounded-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Books Grid */}
+      <div className="space-y-8 py-8">
+        {/* Filters */}
+        <div className="flex flex-col gap-4">
+          <OptimizedSkeleton className="h-5 w-32 ml-auto" />
+          <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>
+
+        {/* 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>
+  );
+}
+