Improve grid card components

- Dynamic placeholder depending on item type
- Fix skeleton for default card

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

@@ -1,5 +1,7 @@
-import { Stack } from '@mantine/core';
+import { Center, Stack } from '@mantine/core';
+import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
 import { generatePath, useNavigate } from 'react-router-dom';
+import { SimpleImg } from 'react-simple-img';
 import { ListChildComponentProps } from 'react-window';
 import styled from 'styled-components';
 import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
@@ -77,14 +79,6 @@ const ImageContainer = styled.div`
   }
 `;
 
-const Image = styled.img`
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  object-fit: cover;
-  border: 0;
-`;
-
 const DetailContainer = styled.div`
   margin-top: 0.5rem;
 `;
@@ -109,14 +103,52 @@ export const PosterCard = ({
       }, {}),
     );
 
+    let Placeholder = RiAlbumFill;
+
+    switch (controls.itemType) {
+      case LibraryItem.ALBUM:
+        Placeholder = RiAlbumFill;
+        break;
+      case LibraryItem.ARTIST:
+        Placeholder = RiUserVoiceFill;
+        break;
+      case LibraryItem.ALBUM_ARTIST:
+        Placeholder = RiUserVoiceFill;
+        break;
+      case LibraryItem.PLAYLIST:
+        Placeholder = RiPlayListFill;
+        break;
+      default:
+        Placeholder = RiAlbumFill;
+        break;
+    }
+
     return (
       <PosterCardContainer key={`card-${columnIndex}-${listChildProps.index}`}>
         <LinkContainer onClick={() => navigate(path)}>
           <ImageContainer>
-            <Image
-              placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
-              src={data?.imageUrl}
-            />
+            {data?.imageUrl ? (
+              <SimpleImg
+                imgStyle={{ objectFit: 'cover' }}
+                importance="auto"
+                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
+                src={data?.imageUrl}
+              />
+            ) : (
+              <Center
+                sx={{
+                  background: 'var(--placeholder-bg)',
+                  borderRadius: 'var(--card-default-radius)',
+                  height: '100%',
+                  width: '100%',
+                }}
+              >
+                <Placeholder
+                  color="var(--placeholder-fg)"
+                  size={35}
+                />
+              </Center>
+            )}
             <GridCardControls
               handleFavorite={controls.handleFavorite}
               handlePlayQueueAdd={controls.handlePlayQueueAdd}