From 760bd14aa7a85f825a1c11d75f4b30571d23f522 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 7 Oct 2025 18:15:57 +0200
Subject: [PATCH] fix: loader was slowing down the pages load time

---
 src/components/layout/ClientLayout.tsx        |  2 -
 .../skeletons/OptimizedSkeletons.tsx          | 97 +++++++++++++++++++
 src/components/ui/loading-bar.tsx             | 97 -------------------
 3 files changed, 97 insertions(+), 99 deletions(-)
 create mode 100644 src/components/skeletons/OptimizedSkeletons.tsx
 delete mode 100644 src/components/ui/loading-bar.tsx

diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index f7aa78f..3beb684 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -9,7 +9,6 @@ import { Toaster } from "@/components/ui/toaster";
 import { usePathname } from "next/navigation";
 import { registerServiceWorker } from "@/lib/registerSW";
 import { NetworkStatus } from "../ui/NetworkStatus";
-import { LoadingBar } from "@/components/ui/loading-bar";
 import { DebugWrapper } from "@/components/debug/DebugWrapper";
 import type { KomgaLibrary, KomgaSeries } from "@/types/komga";
 
@@ -70,7 +69,6 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
         <div className="relative min-h-screen h-full">
-          <LoadingBar />
           {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
           {!isPublicRoute && (
             <Sidebar 
diff --git a/src/components/skeletons/OptimizedSkeletons.tsx b/src/components/skeletons/OptimizedSkeletons.tsx
new file mode 100644
index 0000000..ae29b74
--- /dev/null
+++ b/src/components/skeletons/OptimizedSkeletons.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface OptimizedSkeletonProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function OptimizedSkeleton({ className, children }: OptimizedSkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-muted/50",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function HomePageSkeleton() {
+  return (
+    <main className="container mx-auto px-4 py-8 space-y-12">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <OptimizedSkeleton className="h-8 w-48" />
+        <OptimizedSkeleton className="h-8 w-8 rounded-full" />
+      </div>
+
+      {/* Hero Section */}
+      <OptimizedSkeleton className="h-64 w-full rounded-lg" />
+
+      {/* Media Rows */}
+      <div className="space-y-12">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="space-y-4">
+            <div className="flex items-center gap-2">
+              <OptimizedSkeleton className="h-6 w-6 rounded" />
+              <OptimizedSkeleton className="h-6 w-32" />
+            </div>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+              {Array.from({ length: 6 }).map((_, j) => (
+                <OptimizedSkeleton key={j} className="aspect-[3/4] w-full rounded" />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </main>
+  );
+}
+
+export function SeriesPageSkeleton() {
+  return (
+    <main className="container mx-auto px-4 py-8 space-y-8">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <OptimizedSkeleton className="h-12 w-12 rounded-lg" />
+        <div className="space-y-2">
+          <OptimizedSkeleton className="h-8 w-64" />
+          <OptimizedSkeleton className="h-4 w-32" />
+        </div>
+      </div>
+
+      {/* Books Grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <OptimizedSkeleton key={i} className="aspect-[3/4] w-full rounded" />
+        ))}
+      </div>
+    </main>
+  );
+}
+
+export function LibraryPageSkeleton() {
+  return (
+    <main className="container mx-auto px-4 py-8 space-y-8">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <OptimizedSkeleton className="h-8 w-48" />
+        <div className="flex gap-2">
+          <OptimizedSkeleton className="h-8 w-24" />
+          <OptimizedSkeleton className="h-8 w-8 rounded-full" />
+        </div>
+      </div>
+
+      {/* Series Grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        {Array.from({ length: 18 }).map((_, i) => (
+          <OptimizedSkeleton key={i} className="aspect-[3/4] w-full rounded" />
+        ))}
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/ui/loading-bar.tsx b/src/components/ui/loading-bar.tsx
deleted file mode 100644
index e3b438e..0000000
--- a/src/components/ui/loading-bar.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-
-import { useEffect, useState, useRef } from "react";
-import { cn } from "@/lib/utils";
-import { Loader2 } from "lucide-react";
-
-export function LoadingBar() {
-  const [isLoading, setIsLoading] = useState(false);
-  const [shouldRender, setShouldRender] = useState(false);
-  const pendingRequestsRef = useRef<number>(0);
-
-  useEffect(() => {
-    if (isLoading) {
-      setShouldRender(true);
-    } else {
-      const timer = setTimeout(() => {
-        setShouldRender(false);
-      }, 500);
-      return () => clearTimeout(timer);
-    }
-  }, [isLoading]);
-
-  useEffect(() => {
-    const handleStart = () => {
-      setIsLoading(true);
-    };
-
-    const handleStop = () => {
-      setTimeout(() => {
-        if (pendingRequestsRef.current === 0) {
-          setIsLoading(false);
-        }
-      }, 300);
-    };
-
-    window.addEventListener("navigationStart", handleStart);
-    window.addEventListener("navigationComplete", handleStop);
-
-    return () => {
-      window.removeEventListener("navigationStart", handleStart);
-      window.removeEventListener("navigationComplete", handleStop);
-    };
-  }, []);
-
-  useEffect(() => {
-    const originalFetch = window.fetch;
-
-    window.fetch = async function (...args) {
-      const url = args[0].toString();
-      const isStaticRequest =
-        /\.(css|js|png|jpg|jpeg|gif|webp|svg|ico|mp3|mp4|webm|ttf|woff|woff2)$/.test(url);
-      const isBookPageRequest = url.includes("/api/komga/images/books/") && url.includes("/pages");
-
-      if (!isStaticRequest && !isBookPageRequest) {
-        pendingRequestsRef.current++;
-        setIsLoading(true);
-      }
-
-      try {
-        const response = await originalFetch.apply(this, args);
-        return response;
-      } finally {
-        if (!isStaticRequest && !isBookPageRequest) {
-          pendingRequestsRef.current = Math.max(0, pendingRequestsRef.current - 1);
-
-          if (pendingRequestsRef.current === 0) {
-            setTimeout(() => {
-              setIsLoading(false);
-            }, 200);
-          }
-        }
-      }
-    };
-
-    return () => {
-      window.fetch = originalFetch;
-    };
-  }, []);
-
-  if (!shouldRender) return null;
-
-  return (
-    <div
-      className={cn(
-        "fixed inset-0 z-50",
-        "bg-background/80 backdrop-blur-sm",
-        "flex items-center justify-center",
-        isLoading ? "opacity-100" : "opacity-0 transition-opacity duration-500"
-      )}
-    >
-      <div className="flex flex-col items-center gap-2 px-4 py-2 rounded-lg bg-background/50 backdrop-blur-sm shadow-lg">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <p className="text-sm text-muted-foreground">Chargement...</p>
-      </div>
-    </div>
-  );
-}