Add card placeholder images

src/renderer/api/jellyfin.api.ts

@@ -636,7 +636,11 @@ const normalizeAlbum = (item: JFAlbum, server: ServerListItem, imageSize?: numbe
     duration: item.RunTimeTicks / 10000000,
     genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })),
     id: item.Id,
-    imagePlaceholderUrl: null,
+    imagePlaceholderUrl: getAlbumCoverArtUrl({
+      baseUrl: server.url,
+      item,
+      size: 1,
+    }),
     imageUrl: getAlbumCoverArtUrl({
       baseUrl: server.url,
       item,

src/renderer/api/navidrome.api.ts

@@ -466,7 +466,13 @@ const normalizeAlbum = (item: NDAlbum, server: ServerListItem, imageSize?: numbe
     size: imageSize || 300,
   });
 
-  const imagePlaceholderUrl = imageUrl?.replace(/size=\d+/, 'size=50') || null;
+  const imagePlaceholderUrl = getCoverArtUrl({
+    baseUrl: server.url,
+    coverArtId: item.coverArtId,
+    credential: server.credential,
+    size: 1,
+  });
+
   const imageBackdropUrl = imageUrl?.replace(/size=\d+/, 'size=1000') || null;
 
   return {

src/renderer/components/card/album-card.tsx

@@ -151,7 +151,7 @@ export const AlbumCard = ({
                 animationDuration={0.3}
                 height={size}
                 imgStyle={{ objectFit: 'cover' }}
-                placeholder="var(--card-default-bg)"
+                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
                 src={data?.imageUrl}
                 width={size}
               />

src/renderer/components/virtual-grid/grid-card/default-card.tsx

@@ -158,7 +158,7 @@ export const DefaultCard = ({
                 animationDuration={0.3}
                 height={cardSize}
                 imgStyle={{ objectFit: 'cover' }}
-                placeholder="var(--card-default-bg)"
+                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
                 src={data?.imageUrl}
                 width={cardSize}
               />

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -153,7 +153,7 @@ export const PosterCard = ({
                   animationDuration={0.3}
                   height={sizes.itemWidth}
                   importance="auto"
-                  placeholder="var(--card-default-bg)"
+                  placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
                   src={data?.imageUrl}
                   width={sizes.itemWidth}
                 />