feat: loader on images

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;

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
                 />