From 263ca86bc5aac5b46e32c5f94f096ce0d82784d3 Mon Sep 17 00:00:00 2001
From: Andrew Smith <andrew@andrew.codes>
Date: Mon, 19 Feb 2024 21:20:37 +0000
Subject: [PATCH] Broken images are not ideal Fixes #225

---
 .../src/components/GameFigure.tsx             | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/playnite-web/src/components/GameFigure.tsx b/apps/playnite-web/src/components/GameFigure.tsx
index 8f60da233..17da91094 100644
--- a/apps/playnite-web/src/components/GameFigure.tsx
+++ b/apps/playnite-web/src/components/GameFigure.tsx
@@ -19,6 +19,7 @@ const Image = styled('img', {
   height: `${width}`,
   objectFit: 'cover',
   width,
+  display: 'block',
 }))
 
 const GameFigure: FC<
@@ -39,6 +40,8 @@ const GameFigure: FC<
   }, [])
   const { ref } = useInView({ onChange: handleChange })
 
+  const [imageHasError, setImageHasError] = useState(false)
+
   return (
     <Figure style={style} ref={ref} width={width}>
       {hasBeenInViewBefore || noDefer
@@ -47,13 +50,24 @@ const GameFigure: FC<
               sx={{ position: 'relative' }}
               key={`${game.oid.asString}-image`}
             >
-              <Image
-                src={game.cover}
-                alt={game.name}
-                width={width}
-                loading="eager"
-                onError={(e) => {}}
-              />
+              {!imageHasError ? (
+                <Image
+                  src={game.cover}
+                  alt={game.name}
+                  width={width}
+                  loading="eager"
+                  onError={(e) => {
+                    setImageHasError(true)
+                  }}
+                />
+              ) : (
+                <Box
+                  sx={{
+                    height: `${width}`,
+                    width: `${width}`,
+                  }}
+                ></Box>
+              )}
               <Box
                 sx={(theme) => ({
                   position: 'absolute',