From 0f8e73be547299f0682bcc259a560701fa065b55 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 15 Oct 2025 03:49:40 +0200
Subject: [PATCH] refactor: replace Next.js Image component with standard img
 element in Thumbnail for improved performance and compatibility

---
 src/components/reader/components/Thumbnail.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/reader/components/Thumbnail.tsx b/src/components/reader/components/Thumbnail.tsx
index ef107dc..732e9e6 100644
--- a/src/components/reader/components/Thumbnail.tsx
+++ b/src/components/reader/components/Thumbnail.tsx
@@ -1,7 +1,6 @@
 import type { ThumbnailProps } from "../types";
 import { ImageLoader } from "@/components/ui/image-loader";
 import { cn } from "@/lib/utils";
-import Image from "next/image";
 import { forwardRef, useEffect, useState, useCallback, useRef, useImperativeHandle } from "react";
 
 export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
@@ -128,17 +127,14 @@ export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
       >
         <ImageLoader isLoading={isLoading} />
         {imageUrl && !hasError && (
-          <Image
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
             src={imageUrl}
             alt={`Miniature page ${pageNumber}`}
             className={cn(
-              "object-contain transition-opacity duration-300",
+              "absolute inset-0 w-full h-full object-contain transition-opacity duration-300",
               isLoading ? "opacity-0" : "opacity-100"
             )}
-            fill
-            sizes="100px"
-            loading="lazy"
-            quality={50}
             onLoad={handleImageLoad}
             onError={handleImageError}
           />