From 59678b6a5974fc2355ca82c54273f90e616489fd Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sat, 15 Feb 2025 17:32:37 +0100
Subject: [PATCH] feat: loader on images

---
 src/components/home/HeroSection.tsx    | 16 ++++--
 src/components/home/MediaRow.tsx       | 16 ++++--
 src/components/library/SeriesGrid.tsx  | 38 ++++++++++-----
 src/components/reader/BookReader.tsx   | 50 ++++++++++++-------
 src/components/series/BookGrid.tsx     | 51 +++++++++++++++++---
 src/components/series/SeriesHeader.tsx | 15 +++++-
 src/components/ui/image-loader.tsx     | 67 ++++++++++++++++++++++++++
 7 files changed, 204 insertions(+), 49 deletions(-)
 create mode 100644 src/components/ui/image-loader.tsx

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 0c89f3f..d5581c5 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { useState } from "react";
 import { ImageOff } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { ImageLoader } from "@/components/ui/image-loader";
 
 interface HeroSectionProps {
   series: KomgaSeries[];
@@ -47,23 +48,28 @@ interface CoverImageProps {
 
 function CoverImage({ series }: CoverImageProps) {
   const [imageError, setImageError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(true);
 
   return (
     <div className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden">
       {!imageError ? (
-        <div className="absolute inset-0">
+        <>
+          <ImageLoader isLoading={imageLoading} />
           <Image
             src={`/api/komga/images/series/${series.id}/thumbnail`}
             alt={`Couverture de ${series.metadata.title}`}
-            width={200}
-            height={300}
-            className="w-full h-full object-cover"
+            fill
+            className={cn(
+              "object-cover transition-opacity duration-300",
+              imageLoading ? "opacity-0" : "opacity-100"
+            )}
             sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
             priority={true}
             loading="eager"
             onError={() => setImageError(true)}
+            onLoad={() => setImageLoading(false)}
           />
-        </div>
+        </>
       ) : (
         <div className="w-full h-full flex items-center justify-center">
           <ImageOff className="w-8 h-8" />
diff --git a/src/components/home/MediaRow.tsx b/src/components/home/MediaRow.tsx
index 69942a2..3d62a91 100644
--- a/src/components/home/MediaRow.tsx
+++ b/src/components/home/MediaRow.tsx
@@ -5,6 +5,7 @@ import { ChevronLeft, ChevronRight, ImageOff } from "lucide-react";
 import Image from "next/image";
 import { useRef, useState } from "react";
 import { cn } from "@/lib/utils";
+import { ImageLoader } from "@/components/ui/image-loader";
 
 interface MediaRowProps {
   title: string;
@@ -82,6 +83,7 @@ interface MediaCardProps {
 
 function MediaCard({ item, onClick }: MediaCardProps) {
   const [imageError, setImageError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(true);
 
   // Déterminer si c'est une série ou un livre
   const isSeries = "booksCount" in item;
@@ -106,19 +108,23 @@ function MediaCard({ item, onClick }: MediaCardProps) {
       {/* Image de couverture */}
       <div className="relative aspect-[2/3] bg-muted">
         {!imageError ? (
-          <div className="absolute inset-0">
+          <>
+            <ImageLoader isLoading={imageLoading} />
             <Image
               src={`/api/komga/images/${isSeries ? "series" : "books"}/${item.id}/thumbnail`}
               alt={`Couverture de ${title}`}
-              width={200}
-              height={300}
-              className="w-full h-full object-cover"
+              fill
+              className={cn(
+                "object-cover transition-opacity duration-300",
+                imageLoading ? "opacity-0" : "opacity-100"
+              )}
               sizes="200px"
               priority={true}
               loading="eager"
               onError={() => setImageError(true)}
+              onLoad={() => setImageLoading(false)}
             />
-          </div>
+          </>
         ) : (
           <div className="w-full h-full flex items-center justify-center">
             <ImageOff className="w-12 h-12" />
diff --git a/src/components/library/SeriesGrid.tsx b/src/components/library/SeriesGrid.tsx
index f971da6..1452965 100644
--- a/src/components/library/SeriesGrid.tsx
+++ b/src/components/library/SeriesGrid.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { KomgaSeries } from "@/types/komga";
-import { Book, ImageOff } from "lucide-react";
+import { Book, ImageOff, Loader2 } from "lucide-react";
 import Image from "next/image";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { ImageLoader } from "@/components/ui/image-loader";
+import { cn } from "@/lib/utils";
 
 interface SeriesGridProps {
   series: KomgaSeries[];
@@ -66,27 +68,37 @@ interface SeriesCardProps {
 
 function SeriesCard({ series, onClick }: SeriesCardProps) {
   const [imageError, setImageError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const statusInfo = getReadingStatusInfo(series);
+  const isCompleted = series.booksCount === series.booksReadCount;
 
   return (
     <button
       onClick={onClick}
-      className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted"
+      className={cn(
+        "group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted",
+        isCompleted && "opacity-50"
+      )}
     >
       {!imageError ? (
-        <Image
-          src={`/api/komga/images/series/${series.id}/thumbnail`}
-          alt={`Couverture de ${series.metadata.title}`}
-          fill
-          className={`object-cover ${
-            series.booksCount === series.booksReadCount ? "opacity-50" : ""
-          }`}
-          sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
-          onError={() => setImageError(true)}
-        />
+        <>
+          <ImageLoader isLoading={isLoading} />
+          <Image
+            src={`/api/komga/images/series/${series.id}/thumbnail`}
+            alt={`Couverture de ${series.metadata.title}`}
+            fill
+            className={cn(
+              "object-cover transition-opacity duration-300",
+              isLoading ? "opacity-0" : "opacity-100"
+            )}
+            sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
+            onError={() => setImageError(true)}
+            onLoad={() => setIsLoading(false)}
+          />
+        </>
       ) : (
         <div className="w-full h-full flex items-center justify-center">
-          <ImageOff className="w-12 h-12" />
+          <ImageOff className="w-12 h-12 text-muted-foreground" />
         </div>
       )}
 
diff --git a/src/components/reader/BookReader.tsx b/src/components/reader/BookReader.tsx
index 0700119..ccf4150 100644
--- a/src/components/reader/BookReader.tsx
+++ b/src/components/reader/BookReader.tsx
@@ -12,6 +12,8 @@ import {
 } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState, useCallback, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { ImageLoader } from "@/components/ui/image-loader";
 
 interface PageCache {
   [pageNumber: number]: {
@@ -30,6 +32,7 @@ interface BookReaderProps {
 export function BookReader({ book, pages, onClose }: BookReaderProps) {
   const [currentPage, setCurrentPage] = useState(book.readProgress?.page || 1);
   const [isLoading, setIsLoading] = useState(true);
+  const [secondPageLoading, setSecondPageLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
   const [isDoublePage, setIsDoublePage] = useState(false);
   const [showNavigation, setShowNavigation] = useState(false);
@@ -103,6 +106,11 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
     }
   }, [currentPage, pages.length, isDoublePage, syncReadProgress]);
 
+  // Réinitialiser l'état de chargement lors du changement de mode double page
+  useEffect(() => {
+    setIsLoading(true);
+  }, [isDoublePage]);
+
   // Fonction pour précharger une page
   const preloadPage = useCallback(
     async (pageNumber: number) => {
@@ -449,11 +457,18 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
               {/* Deuxième page en mode double page */}
               {isDoublePage && shouldShowDoublePage(currentPage) && (
                 <div className="relative max-h-[calc(100vh-2rem)] flex items-center justify-center">
+                  <ImageLoader isLoading={isLoading} />
                   <img
                     src={getPageUrl(currentPage + 1)}
                     alt={`Page ${currentPage + 1}`}
-                    className="max-h-[calc(100vh-2rem)] w-auto object-contain"
-                    onLoad={() => handleThumbnailLoad(currentPage + 1)}
+                    className={cn(
+                      "max-h-[calc(100vh-2rem)] w-auto object-contain transition-opacity duration-300",
+                      isLoading ? "opacity-0" : "opacity-100"
+                    )}
+                    onLoad={() => {
+                      setIsLoading(false);
+                      handleThumbnailLoad(currentPage + 1);
+                    }}
                   />
                 </div>
               )}
@@ -546,22 +561,23 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
                           : "opacity-60 hover:opacity-100 hover:scale-105"
                       }`}
                     >
-                      {!loadedThumbnails[pageNumber] && isVisible && (
-                        <div className="absolute inset-0 flex items-center justify-center bg-muted">
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        </div>
-                      )}
                       {isVisible && (
-                        <Image
-                          src={getThumbnailUrl(pageNumber)}
-                          alt={`Miniature page ${pageNumber}`}
-                          className="object-cover"
-                          fill
-                          sizes="100px"
-                          onLoad={() => handleThumbnailLoad(pageNumber)}
-                          loading="lazy"
-                          quality={50}
-                        />
+                        <>
+                          <ImageLoader isLoading={!loadedThumbnails[pageNumber]} />
+                          <Image
+                            src={getThumbnailUrl(pageNumber)}
+                            alt={`Miniature page ${pageNumber}`}
+                            className={cn(
+                              "object-cover transition-opacity duration-300",
+                              !loadedThumbnails[pageNumber] ? "opacity-0" : "opacity-100"
+                            )}
+                            fill
+                            sizes="100px"
+                            onLoad={() => handleThumbnailLoad(pageNumber)}
+                            loading="lazy"
+                            quality={50}
+                          />
+                        </>
                       )}
                       <div className="absolute bottom-0 inset-x-0 h-6 bg-gradient-to-t from-black/60 to-transparent flex items-center justify-center">
                         <span className="text-xs text-white font-medium">{pageNumber}</span>
diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx
index 8e7487b..cfddd5e 100644
--- a/src/components/series/BookGrid.tsx
+++ b/src/components/series/BookGrid.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { KomgaBook } from "@/types/komga";
-import { ImageOff } from "lucide-react";
+import { ImageOff, Loader2 } from "lucide-react";
 import Image from "next/image";
 import { useState } from "react";
 import { formatDate } from "@/lib/utils";
+import { ImageLoader } from "@/components/ui/image-loader";
+import { cn } from "@/lib/utils";
 
 interface BookGridProps {
   books: KomgaBook[];
@@ -61,12 +63,10 @@ export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridPr
             onClick={() => onBookClick(book)}
             className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-100 transition-all"
           >
-            <Image
-              src={getBookThumbnailUrl(book.id)}
-              alt={book.metadata.title}
-              fill
-              className={`object-cover ${book.readProgress?.completed ? "opacity-50" : ""}`}
-              sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
+            <BookImage
+              book={book}
+              getBookThumbnailUrl={getBookThumbnailUrl}
+              isCompleted={book.readProgress?.completed}
             />
             <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
               <p className="text-sm font-medium text-white text-left line-clamp-2">
@@ -85,6 +85,43 @@ export function BookGrid({ books, onBookClick, getBookThumbnailUrl }: BookGridPr
   );
 }
 
+interface BookImageProps {
+  book: KomgaBook;
+  getBookThumbnailUrl: (bookId: string) => string;
+  isCompleted?: boolean;
+}
+
+function BookImage({ book, getBookThumbnailUrl, isCompleted }: BookImageProps) {
+  const [imageError, setImageError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  if (imageError) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <ImageOff className="w-12 h-12 text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("relative h-full w-full", isCompleted && "opacity-50")}>
+      <ImageLoader isLoading={isLoading} />
+      <Image
+        src={getBookThumbnailUrl(book.id)}
+        alt={book.metadata.title}
+        fill
+        className={cn(
+          "object-cover transition-opacity duration-300",
+          isLoading ? "opacity-0" : "opacity-100"
+        )}
+        sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
+        onError={() => setImageError(true)}
+        onLoad={() => setIsLoading(false)}
+      />
+    </div>
+  );
+}
+
 interface BookCardProps {
   book: KomgaBook;
   onClick?: () => void;
diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index b104966..226b5de 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 import { Button } from "../ui/button";
 import { useToast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
+import { ImageLoader } from "@/components/ui/image-loader";
 
 interface SeriesHeaderProps {
   series: KomgaSeries;
@@ -57,6 +58,7 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
   const [isFavorite, setIsFavorite] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [imageLoading, setImageLoading] = useState(true);
 
   // Vérifier si la série est dans les favoris au chargement
   useEffect(() => {
@@ -143,9 +145,13 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
               src={`/api/komga/images/series/${series.id}/thumbnail`}
               alt=""
               fill
-              className="object-cover opacity-10 blur-2xl scale-110"
+              className={cn(
+                "object-cover blur-2xl scale-110 transition-opacity duration-300",
+                imageLoading ? "opacity-0" : "opacity-10"
+              )}
               priority
               unoptimized
+              onLoad={() => setImageLoading(false)}
             />
           </div>
         )}
@@ -158,13 +164,18 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
           <div className="shrink-0">
             {!imageError ? (
               <div className="relative">
+                <ImageLoader isLoading={imageLoading} />
                 <Image
                   src={`/api/komga/images/series/${series.id}/thumbnail`}
                   alt={series.name}
                   width={200}
                   height={300}
-                  className="rounded-lg shadow-xl hover:shadow-2xl transition-shadow duration-200"
+                  className={cn(
+                    "rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300",
+                    imageLoading ? "opacity-0" : "opacity-100"
+                  )}
                   onError={() => setImageError(true)}
+                  onLoad={() => setImageLoading(false)}
                   priority
                   unoptimized
                 />
diff --git a/src/components/ui/image-loader.tsx b/src/components/ui/image-loader.tsx
new file mode 100644
index 0000000..465541b
--- /dev/null
+++ b/src/components/ui/image-loader.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface ImageLoaderProps {
+  isLoading: boolean;
+}
+
+export function ImageLoader({ isLoading }: ImageLoaderProps) {
+  const [progress, setProgress] = useState(0);
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isLoading) {
+      setShow(true);
+      setProgress(0);
+      const duration = 2000; // 2 secondes
+      const steps = 20;
+      const increment = 90 / steps; // On va jusqu'à 90% max en simulation
+      const stepDuration = duration / steps;
+
+      let currentStep = 0;
+      const interval = setInterval(() => {
+        currentStep++;
+        if (currentStep <= steps) {
+          setProgress((prev) => {
+            const next = prev + increment;
+            return Math.min(next, 90); // Ne pas dépasser 90%
+          });
+        } else {
+          clearInterval(interval);
+        }
+      }, stepDuration);
+
+      return () => clearInterval(interval);
+    } else {
+      setProgress(100);
+      timeout = setTimeout(() => {
+        setShow(false);
+      }, 200);
+    }
+
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [isLoading]);
+
+  if (!show) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 flex flex-col items-center justify-center bg-muted/60 backdrop-blur-[2px] gap-2",
+        "transition-opacity duration-200",
+        isLoading ? "opacity-100" : "opacity-0"
+      )}
+    >
+      <div className="flex flex-col items-center gap-2 bg-background/90 px-4 py-3 rounded-lg shadow-sm">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <span className="text-sm text-muted-foreground font-medium">{Math.round(progress)}%</span>
+      </div>
+    </div>
+  );
+}