improve image placeholders and loading

src/renderer/components/item-card/item-card.module.css

@@ -56,9 +56,7 @@
 }
 
 .image-container.is-round {
-    &::before {
-        border-radius: 50%;
-    }
+    border-radius: 50%;
 }
 
 .favorite-badge {

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

@@ -785,9 +785,9 @@ const PosterItemCard = ({
             <>
                 <ItemImage
                     className={clsx(styles.image, { [styles.isRound]: isRound })}
-                    id={data?.id}
+                    id={(data as { imageId: string })?.imageId}
                     itemType={itemType}
-                    src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
+                    src={(data as { imageUrl: string })?.imageUrl}
                 />
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}

src/renderer/components/item-image/item-image.tsx

@@ -11,6 +11,25 @@ import {
 import { BaseImage, ImageProps } from '/@/shared/components/image/image';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
+const getUnloaderIcon = (itemType: LibraryItem) => {
+    switch (itemType) {
+        case LibraryItem.ALBUM:
+            return 'emptyAlbumImage';
+        case LibraryItem.ALBUM_ARTIST:
+            return 'emptyArtistImage';
+        case LibraryItem.ARTIST:
+            return 'emptyArtistImage';
+        case LibraryItem.GENRE:
+            return 'emptyGenreImage';
+        case LibraryItem.PLAYLIST:
+            return 'emptyPlaylistImage';
+        case LibraryItem.SONG:
+            return 'emptySongImage';
+        default:
+            return 'emptyImage';
+    }
+};
+
 const BaseItemImage = (
     props: Omit<ImageProps, 'src'> & {
         id?: null | string;
@@ -27,7 +46,7 @@ const BaseItemImage = (
         size: 300,
     });
 
-    return <BaseImage src={imageUrl} {...rest} />;
+    return <BaseImage src={imageUrl} unloaderIcon={getUnloaderIcon(props.itemType)} {...rest} />;
 };
 
 export const ItemImage = memo(BaseItemImage);