feat: loader on images

2025-02-15 17:32:37 +01:00
parent c4cb97fa8e
commit 59678b6a59
7 changed files with 204 additions and 49 deletions
--- 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" />
--- 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" />
--- 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>
      )}

--- 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>
--- 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;
--- 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
                />
--- a/src/components/ui/image-loader.tsx
+++ 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>
+  );
+}