From dc500c5bb49503aeda5bc196d05e6f20acea71b5 Mon Sep 17 00:00:00 2001
From: "Jiucheng(Oliver)" <git.jiucheng@gmail.com>
Date: Thu, 26 Dec 2024 11:39:38 -0500
Subject: [PATCH] Refactor BookDetailModal to use Next.js Image component and
 restore conditional rendering for modal visibility (#45)

---
 apps/readest-app/src/components/BookDetailModal.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/readest-app/src/components/BookDetailModal.tsx b/apps/readest-app/src/components/BookDetailModal.tsx
index 1989a38f..2553534f 100644
--- a/apps/readest-app/src/components/BookDetailModal.tsx
+++ b/apps/readest-app/src/components/BookDetailModal.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Book } from '@/types/book';
 import { EnvConfigType } from '@/services/environment';
 import { useSettingsStore } from '@/store/settingsStore';
+import Image from 'next/image';
 
 import WindowButtons from '@/components/WindowButtons';
 
@@ -17,7 +18,6 @@ const BookDetailModal = ({
   book: Book;
   envConfig: EnvConfigType;
 }) => {
-  if (!isOpen) return null;
   const [bookMeta, setBookMeta] = useState<null | {
     title: string;
     language: string | string[];
@@ -40,6 +40,8 @@ const BookDetailModal = ({
     fetchBookDetails();
   }, [book]);
 
+  if (!isOpen) return null;
+
   if (!bookMeta)
     return (
       <div className='fixed inset-0 z-50 flex items-center justify-center'>
@@ -77,9 +79,11 @@ const BookDetailModal = ({
 
         <div className='mb-6 flex items-start'>
           {book.coverImageUrl ? (
-            <img
+            <Image
               src={book.coverImageUrl}
               alt={book.title}
+              width={110}
+              height={165}
               className='mr-4 h-40 w-30 rounded-lg object-contain shadow-md'
             />
           ) : (