Show image placeholder

Instead of trying to load invalid url
2024-03-10 14:33:55 +01:00
parent 21eda17bc1
commit f913f5ec32
1 changed files with 29 additions and 11 deletions
--- a/src/components/util/SpinnerImage.tsx
+++ b/src/components/util/SpinnerImage.tsx
@@ -14,6 +14,7 @@ import { Theme, SxProps, Stack, Button } from '@mui/material';
 import BrokenImageIcon from '@mui/icons-material/BrokenImage';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
+import ImageIcon from '@mui/icons-material/Image';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { Priority } from '@/lib/Queue.ts';
@@ -33,6 +34,8 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML

    const { t } = useTranslation();

+    const showMissingImageIcon = !src.length;
+
    const [imageSourceUrl, setImageSourceUrl] = useState('');
    const [imgLoadRetryKey, setImgLoadRetryKey] = useState(0);
    const [isLoading, setIsLoading] = useState<boolean | undefined>(undefined);
@@ -48,6 +51,10 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
    };

    useEffect(() => {
+        if (showMissingImageIcon) {
+            return () => {};
+        }
+
        let tmpImageSourceUrl: string;
        const imageRequest = requestManager.requestImage(src, Priority.HIGH);
        let cacheTimeout: NodeJS.Timeout;
@@ -121,6 +128,16 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
                </Box>
            )}

+            {showMissingImageIcon ? (
+                <Stack
+                    height="100%"
+                    alignItems="center"
+                    justifyContent="center"
+                    sx={{ background: (theme) => theme.palette.background.default }}
+                >
+                    <ImageIcon fontSize="large" />
+                </Stack>
+            ) : (
                <img
                    key={`${src}_${imgLoadRetryKey}`}
                    style={{
@@ -132,6 +149,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
                    alt={alt}
                    draggable={false}
                />
+            )}
        </>
    );
 });