fix(perf): revert back next/image with lazying loading for much better perf (#3562)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -428,7 +428,7 @@ const FoliateViewer: React.FC<{
     if (isViewCreated.current) return;
     isViewCreated.current = true;
 
-    setLoading(true);
+    setTimeout(() => setLoading(true), 200);
 
     const openBook = async () => {
       console.log('Opening book', bookKey);

apps/readest-app/src/components/BookCover.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Image from 'next/image';
 import { memo, useEffect, useRef, useState } from 'react';
 import { Book } from '@/types/book';
 import { LibraryCoverFitType, LibraryViewModeType } from '@/types/settings';
@@ -69,13 +70,11 @@ const BookCover: React.FC<BookCoverProps> = memo<BookCoverProps>(
       >
         {coverFit === 'crop' ? (
           <>
-            <img
+            <Image
               src={book.metadata?.coverImageUrl || book.coverImageUrl!}
               alt={book.title}
-              className={clsx(
-                'cover-image crop-cover-img h-full w-full object-cover',
-                imageClassName,
-              )}
+              fill={true}
+              className={clsx('cover-image crop-cover-img object-cover', imageClassName)}
               onLoad={handleImageLoad}
               onError={handleImageError}
             />
@@ -91,7 +90,7 @@ const BookCover: React.FC<BookCoverProps> = memo<BookCoverProps>(
                 mode === 'grid' ? 'items-end' : 'items-center',
               )}
             >
-              <img
+              <Image
                 src={book.metadata?.coverImageUrl || book.coverImageUrl!}
                 alt={book.title}
                 width={0}

apps/readest-app/src/components/CachedImage.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useState, useEffect, memo } from 'react';
 
 interface CachedImageProps {
@@ -119,11 +120,11 @@ const CachedImageComponent = ({
   }
 
   if (fill) {
-    return <img src={cachedUrl} alt={alt} className={className} sizes={sizes} />;
+    return <Image src={cachedUrl} alt={alt} fill className={className} sizes={sizes} />;
   }
 
   return (
-    <img
+    <Image
       src={cachedUrl}
       alt={alt}
       width={width}

apps/readest-app/src/components/UserAvatar.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import { IconType } from 'react-icons';
 
@@ -67,7 +68,7 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
     >
       {url ? (
         <div>
-          <img
+          <Image
             src={cachedImageUrl || url}
             alt='User Avatar'
             className={clsx('rounded-full', className, borderClassName)}