From 22800d6b10f3b173c0b76a3ca4535cd71f0f7d13 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Tue, 5 Dec 2023 23:20:41 +1100
Subject: [PATCH] Api image fix (#6034)

* Replace invalid image with skeleton

* Simplify ApiImage

* Flag unused variable
---
 .../src/components/images/ApiImage.tsx        | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/components/images/ApiImage.tsx b/src/frontend/src/components/images/ApiImage.tsx
index 60fa98d2a6..d06ee57f84 100644
--- a/src/frontend/src/components/images/ApiImage.tsx
+++ b/src/frontend/src/components/images/ApiImage.tsx
@@ -4,13 +4,7 @@
  *
  * Image caching is handled automagically by the browsers cache
  */
-import {
-  Image,
-  ImageProps,
-  LoadingOverlay,
-  Overlay,
-  Stack
-} from '@mantine/core';
+import { Image, ImageProps, Skeleton, Stack } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -27,7 +21,7 @@ export function ApiImage(props: ImageProps) {
 
   const queryKey = useId();
 
-  const imgQuery = useQuery({
+  const _imgQuery = useQuery({
     queryKey: ['image', queryKey, props.src],
     enabled:
       authorized &&
@@ -52,7 +46,8 @@ export function ApiImage(props: ImageProps) {
               setImage(url);
               break;
             default:
-              // User is not authorized to view this image
+              // User is not authorized to view this image, or the image is not available
+              setImage('');
               setAuthorized(false);
               console.error(`Error fetching image ${props.src}:`, response);
               break;
@@ -71,9 +66,14 @@ export function ApiImage(props: ImageProps) {
 
   return (
     <Stack>
-      <LoadingOverlay visible={imgQuery.isLoading || imgQuery.isFetching} />
-      <Image {...props} src={image} withPlaceholder fit="contain" />
-      {imgQuery.isError && <Overlay color="#F00" />}
+      {image && image.length > 0 ? (
+        <Image {...props} src={image} withPlaceholder fit="contain" />
+      ) : (
+        <Skeleton
+          height={props?.height ?? props.width}
+          width={props?.width ?? props.height}
+        />
+      )}
     </Stack>
   );
 }