julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace Next.js Image component with standard img element in Thumbnail for improved performance and compatibility

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-15 03:49:40 +02:00
parent 2be1ff05cd
commit 0f8e73be54
1 changed files with 3 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/reader/components/Thumbnail.tsx
View File

@@ -1,7 +1,6 @@
import type { ThumbnailProps } from "../types"; import type { ThumbnailProps } from "../types";
import { ImageLoader } from "@/components/ui/image-loader"; import { ImageLoader } from "@/components/ui/image-loader";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import Image from "next/image";
import { forwardRef, useEffect, useState, useCallback, useRef, useImperativeHandle } from "react"; import { forwardRef, useEffect, useState, useCallback, useRef, useImperativeHandle } from "react";
export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>( export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
@@ -128,17 +127,14 @@ export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
> >
<ImageLoader isLoading={isLoading} /> <ImageLoader isLoading={isLoading} />
{imageUrl && !hasError && ( {imageUrl && !hasError && (
<Image // eslint-disable-next-line @next/next/no-img-element
<img
src={imageUrl} src={imageUrl}
alt={`Miniature page ${pageNumber}`} alt={`Miniature page ${pageNumber}`}
className={cn( 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" isLoading ? "opacity-0" : "opacity-100"
)} )}
fill
sizes="100px"
loading="lazy"
quality={50}
onLoad={handleImageLoad} onLoad={handleImageLoad}
onError={handleImageError} onError={handleImageError}
/> />