diff --git a/src/renderer/src/pages/library/library-game-card.scss b/src/renderer/src/pages/library/library-game-card.scss index ab9a9f2a..a0ef7e29 100644 --- a/src/renderer/src/pages/library/library-game-card.scss +++ b/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 { diff --git a/src/renderer/src/pages/library/library-game-card.tsx b/src/renderer/src/pages/library/library-game-card.tsx index a91176cb..59235e9b 100644 --- a/src/renderer/src/pages/library/library-game-card.tsx +++ b/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 { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react"; +import { memo, useState, useEffect } from "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 ( ); });