From 9d06503048ca63b8d818f498d504696cbd6b87c7 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 9 Sep 2024 15:35:19 +0200
Subject: [PATCH] Show manga image fullscreen button only on successful load

In case the image load failed, the fullscreen button made the image retry button unclickable
---
 src/components/manga/MangaDetails.tsx | 44 +++++++++++++++------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/manga/MangaDetails.tsx b/src/components/manga/MangaDetails.tsx
index 5d14a1a8..4a4bceca 100644
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -9,7 +9,7 @@
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import { styled, useTheme } from '@mui/material/styles';
-import { ComponentProps, useEffect, useMemo } from 'react';
+import { ComponentProps, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import Link from '@mui/material/Link';
@@ -103,6 +103,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
     const theme = useTheme();
 
     const popupState = usePopupState({ variant: 'popover', popupId: 'manga-thumbnail-fullscreen' });
+    const [isImageReady, setIsImageReady] = useState(false);
 
     return (
         <>
@@ -125,6 +126,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
                 <SpinnerImage
                     src={Mangas.getThumbnailUrl(manga)}
                     alt="Manga Thumbnail"
+                    onImageLoad={() => setIsImageReady(true)}
                     spinnerStyle={{
                         borderRadius: 0.5,
                         width: '150px',
@@ -139,25 +141,27 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
                         },
                     }}
                 />
-                <Stack
-                    {...bindTrigger(popupState)}
-                    sx={{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        width: '100%',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        opacity: 0,
-                        '&:hover': {
-                            background: 'rgba(0, 0, 0, 0.4)',
-                            cursor: 'pointer',
-                            opacity: 1,
-                        },
-                    }}
-                >
-                    <OpenInFullIcon fontSize="large" color="primary" />
-                </Stack>
+                {isImageReady && (
+                    <Stack
+                        {...bindTrigger(popupState)}
+                        sx={{
+                            position: 'absolute',
+                            top: 0,
+                            bottom: 0,
+                            width: '100%',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            opacity: 0,
+                            '&:hover': {
+                                background: 'rgba(0, 0, 0, 0.4)',
+                                cursor: 'pointer',
+                                opacity: 1,
+                            },
+                        }}
+                    >
+                        <OpenInFullIcon fontSize="large" color="primary" />
+                    </Stack>
+                )}
             </Stack>
             <Modal {...bindPopover(popupState)} sx={{ outline: 0 }}>
                 <Stack