Add loading skeleton to table cell rows

src/renderer/components/virtual-table/cells/album-artist-cell.tsx

@@ -6,8 +6,20 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
+import { Skeleton } from '/@/renderer/components/skeleton';
 
 export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
+  if (!value) {
+    return (
+      <CellContainer position="left">
+        <Skeleton
+          height="1rem"
+          width="80%"
+        />
+      </CellContainer>
+    );
+  }
+
   return (
     <CellContainer position="left">
       <Text

src/renderer/components/virtual-table/cells/artist-cell.tsx

@@ -6,8 +6,20 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
+import { Skeleton } from '/@/renderer/components/skeleton';
 
 export const ArtistCell = ({ value, data }: ICellRendererParams) => {
+  if (!value) {
+    return (
+      <CellContainer position="left">
+        <Skeleton
+          height="1rem"
+          width="80%"
+        />
+      </CellContainer>
+    );
+  }
+
   return (
     <CellContainer position="left">
       <Text

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -8,6 +8,7 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
 import { ServerType } from '/@/renderer/types';
+import { Skeleton } from '/@/renderer/components/skeleton';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
   display: grid;
@@ -43,16 +44,37 @@ const StyledImage = styled.img`
 
 export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
   const artists = useMemo(() => {
-    return value.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
+    if (!value) return null;
+    return value?.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
   }, [value]);
 
+  if (!value) {
+    return (
+      <CellContainer height={node.rowHeight || 40}>
+        <Skeleton>
+          <ImageWrapper />
+        </Skeleton>
+        <MetadataWrapper>
+          <Skeleton
+            height="1rem"
+            width="80%"
+          />
+          <Skeleton
+            height="1rem"
+            mt="0.5rem"
+            width="60%"
+          />
+        </MetadataWrapper>
+      </CellContainer>
+    );
+  }
+
   return (
     <CellContainer height={node.rowHeight || 40}>
       <ImageWrapper>
         <StyledImage
-          alt="song-cover"
+          alt="cover"
           height={(node.rowHeight || 40) - 10}
-          loading="lazy"
           src={value.imageUrl}
           style={{}}
           width={(node.rowHeight || 40) - 10}

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -1,6 +1,7 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 
 export const CellContainer = styled.div<{
@@ -32,6 +33,17 @@ export const GenericCell = (
 ) => {
   const displayedValue = valueFormatted || value;
 
+  if (!value) {
+    return (
+      <CellContainer position={position || 'left'}>
+        <Skeleton
+          height="1rem"
+          width="80%"
+        />
+      </CellContainer>
+    );
+  }
+
   return (
     <CellContainer position={position || 'left'}>
       {isLink ? (