fix: library cards not using placeholder and icon as a game cover

src/renderer/src/pages/library/library-game-card.scss

@@ -221,6 +221,26 @@
     left: 0;
     z-index: 0;
   }
+
+  &__cover-placeholder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.08) 0%,
+      rgba(255, 255, 255, 0.04) 50%,
+      rgba(255, 255, 255, 0.08) 100%
+    );
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 0;
+  }
 }
 
 @keyframes pulse {

src/renderer/src/pages/library/library-game-card.tsx

@@ -1,7 +1,12 @@
 import { LibraryGame } from "@types";
 import { useGameCard } from "@renderer/hooks";
-import { memo } from "react";
+import { memo, useState, useEffect } from "react";
-import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react";
+import {
+  ClockIcon,
+  AlertFillIcon,
+  TrophyIcon,
+  ImageIcon,
+} from "@primer/octicons-react";
 import "./library-game-card.scss";
 
 interface LibraryGameCardProps {
@@ -26,7 +31,6 @@ export const LibraryGameCard = memo(function LibraryGameCard({
     useGameCard(game, onContextMenu);
 
   const coverImage = (
-    game.customIconUrl ??
     game.coverImageUrl ??
     game.libraryImageUrl ??
     game.libraryHeroImageUrl ??
@@ -34,6 +38,12 @@ export const LibraryGameCard = memo(function LibraryGameCard({
     ""
   ).replaceAll("\\", "/");
 
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    setImageError(false);
+  }, [coverImage]);
+
   return (
     <button
       type="button"
@@ -98,12 +108,19 @@ export const LibraryGameCard = memo(function LibraryGameCard({
         )}
       </div>
 
-      <img
+      {imageError || !coverImage ? (
-        src={coverImage ?? undefined}
+        <div className="library-game-card__cover-placeholder">
-        alt={game.title}
+          <ImageIcon size={48} />
-        className="library-game-card__game-image"
+        </div>
-        loading="lazy"
+      ) : (
-      />
+        <img
+          src={coverImage}
+          alt={game.title}
+          className="library-game-card__game-image"
+          loading="lazy"
+          onError={() => setImageError(true)}
+        />
+      )}
     </button>
   );
 });