From 84f9dc176ee6923b62ee53a06aa86730652a2300 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Wed, 18 Jun 2025 18:58:46 +0200
Subject: [PATCH] Image Loading (MangaCovers) with lazy load attribute, onError
 instead of onLoad hook, preventing requests before sizing is complete

---
 tranga-website/src/Components/Manga.tsx     |  9 ++++++---
 tranga-website/src/Components/MangaList.tsx | 15 ++++-----------
 tranga-website/src/api/Manga.tsx            |  4 +---
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/tranga-website/src/Components/Manga.tsx b/tranga-website/src/Components/Manga.tsx
index 725d2d7..d70c21c 100644
--- a/tranga-website/src/Components/Manga.tsx
+++ b/tranga-website/src/Components/Manga.tsx
@@ -21,6 +21,9 @@ const coverSx : SxProps = {
 const coverCss : CSSProperties = {
     maxHeight: "calc("+CardHeight+"px + 2rem)",
     maxWidth: "calc("+CardWidth+"px + 2rem)",
+    objectFit: "cover",
+    width: "calc("+CardHeight+"px + 2rem)",
+    height: "calc("+CardHeight+"px + 2rem)",
 }
 
 export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
@@ -34,7 +37,7 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
             <Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><Tooltip title={"Loading"}><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Tooltip></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}>
                     <Card sx={{height:"fit-content",width:"fit-content"}}>
                         <CardCover>
-                            <img style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
+                            <img loading={"lazy"} style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
                         </CardCover>
                         <CardCover sx={{
                             background:
@@ -94,9 +97,9 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
                     setExpanded(!expanded)}
             }>
                 <CardCover>
-                    <img style={coverCss} src={GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current)} alt="Manga Cover"
+                    <img loading={"lazy"} style={coverCss} src={GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current)} alt="Manga Cover"
                          ref={CoverRef}
-                         onLoad={LoadMangaCover}/>
+                         onError={LoadMangaCover}/>
                 </CardCover>
                 <CardCover sx={{
                     background:
diff --git a/tranga-website/src/Components/MangaList.tsx b/tranga-website/src/Components/MangaList.tsx
index 11dfbb6..b334fd3 100644
--- a/tranga-website/src/Components/MangaList.tsx
+++ b/tranga-website/src/Components/MangaList.tsx
@@ -27,17 +27,12 @@ export default function MangaList({connected, setShowSearch}: {connected: boolea
         StartJob(apiUri, jobId, true).finally(() => getJobList());
     },[apiUri]);
 
-    useEffect(() => {
-        getJobList();
-    }, [apiUri]);
-
     useEffect(() => {
         updateTimer();
-        getJobList();
-    }, [connected]);
+    }, [connected, apiUri]);
 
     const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
-    const updateTimer = () => {
+    const updateTimer = useCallback(() => {
         if(!connected){
             clearTimeout(timerRef.current);
             return;
@@ -45,12 +40,10 @@ export default function MangaList({connected, setShowSearch}: {connected: boolea
             if(timerRef.current === undefined) {
                 console.log("Added timer!");
                 getJobList();
-                timerRef.current = setInterval(() => {
-                    getJobList();
-                }, 2000);
+                timerRef.current = setInterval(getJobList, 2000);
             }
         }
-    }
+    }, [getJobList, connected, timerRef]);
 
     return(
         <Stack direction="row" spacing={1} flexWrap={"wrap"} sx={{overflowX: 'hidden', overflowY: 'auto' /* Badge overflow */}} paddingTop={"6px" /* Badge overflow */}>
diff --git a/tranga-website/src/api/Manga.tsx b/tranga-website/src/api/Manga.tsx
index b12a4dd..7baf77b 100644
--- a/tranga-website/src/api/Manga.tsx
+++ b/tranga-website/src/api/Manga.tsx
@@ -29,9 +29,7 @@ export const DeleteManga = async (apiUri: string, mangaId: string) : Promise<voi
 }
 
 export const GetMangaCoverImageUrl = (apiUri: string, mangaId: string, ref: HTMLImageElement | undefined | null) : string => {
-    if(ref == null || ref == undefined)
-        return `${apiUri}/v2/Manga/${mangaId}/Cover?width=64&height=64`;
-    if(mangaId === DefaultManga.mangaId)
+    if(ref == null || ref == undefined || mangaId === DefaultManga.mangaId)
         return "/blahaj.png";
     return `${apiUri}/v2/Manga/${mangaId}/Cover?width=${ref.clientWidth}&height=${ref.clientHeight}`;
 }