From c644224072f53549b67b3446d486113dbb775dde Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 1 Nov 2025 02:35:16 -0700
Subject: [PATCH] add dynamic cell skeleton sizing

---
 .../columns/album-artists-column.tsx          | 14 ++++++-------
 .../columns/artists-column.tsx                | 14 ++++++-------
 .../item-table-list/columns/count-column.tsx  | 13 ++++++------
 .../item-table-list/columns/date-column.tsx   | 21 ++++++++-----------
 .../columns/default-column.tsx                | 13 +++++-------
 .../columns/duration-column.tsx               | 13 ++++++------
 .../columns/genre-badge-column.tsx            | 14 ++++++-------
 .../item-table-list/columns/genre-column.tsx  | 14 ++++++-------
 .../item-table-list/columns/image-column.tsx  |  2 +-
 .../columns/numeric-column.tsx                | 13 ++++++------
 .../item-table-list/columns/path-column.tsx   | 13 ++++++------
 .../item-table-list/columns/size-column.tsx   | 13 ++++++------
 .../item-table-list/columns/text-column.tsx   | 13 ++++++------
 .../item-table-list/columns/title-column.tsx  | 14 ++++++-------
 .../columns/title-combined-column.tsx         | 14 ++++++-------
 .../item-table-list-column.tsx                | 21 +++++++++++++++++++
 16 files changed, 120 insertions(+), 99 deletions(-)

diff --git a/src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx b/src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx
index 2158c3a91..f8b180ae4 100644
--- a/src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx
@@ -5,12 +5,12 @@ import { generatePath, Link } from 'react-router';
 import styles from './album-artists-column.module.css';
 
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnContainer,
-    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { AppRoute } from '/@/renderer/router/routes';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 import { RelatedAlbumArtist } from '/@/shared/types/domain-types';
 
@@ -51,11 +51,11 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn);
diff --git a/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx b/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx
index 1d8be296c..7963bb291 100644
--- a/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx
@@ -5,12 +5,12 @@ import { generatePath, Link } from 'react-router';
 import styles from './album-artists-column.module.css';
 
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnContainer,
-    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { AppRoute } from '/@/renderer/router/routes';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 import { RelatedAlbumArtist } from '/@/shared/types/domain-types';
 
@@ -51,11 +51,11 @@ const ArtistsColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const ArtistsColumnMemo = memo(ArtistsColumn);
diff --git a/src/renderer/components/item-list/item-table-list/columns/count-column.tsx b/src/renderer/components/item-list/item-table-list/columns/count-column.tsx
index d93871b15..703e483b0 100644
--- a/src/renderer/components/item-list/item-table-list/columns/count-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/count-column.tsx
@@ -1,8 +1,9 @@
 import {
+    ColumnNullFallback,
+    ColumnSkeletonFixed,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
 export const CountColumn = (props: ItemTableListInnerColumn) => {
     const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -15,9 +16,9 @@ export const CountColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonFixed {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/date-column.tsx b/src/renderer/components/item-list/item-table-list/columns/date-column.tsx
index 7fcf0d23d..778d3608a 100644
--- a/src/renderer/components/item-list/item-table-list/columns/date-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/date-column.tsx
@@ -1,9 +1,10 @@
 import {
+    ColumnNullFallback,
+    ColumnSkeletonFixed,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { formatDateAbsolute, formatDateRelative } from '/@/renderer/utils/format';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 
 export const DateColumn = (props: ItemTableListInnerColumn) => {
@@ -21,11 +22,11 @@ export const DateColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonFixed {...props} />;
 };
 
 export const RelativeDateColumn = (props: ItemTableListInnerColumn) => {
@@ -44,12 +45,8 @@ export const RelativeDateColumn = (props: ItemTableListInnerColumn) => {
     }
 
     if (row === null) {
-        return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
+        return <ColumnNullFallback {...props} />;
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    return <ColumnSkeletonFixed {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/default-column.tsx b/src/renderer/components/item-list/item-table-list/columns/default-column.tsx
index 158a41350..0f552b5fb 100644
--- a/src/renderer/components/item-list/item-table-list/columns/default-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/default-column.tsx
@@ -1,8 +1,9 @@
 import {
+    ColumnNullFallback,
+    ColumnSkeletonFixed,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
 export const DefaultColumn = (props: ItemTableListInnerColumn) => {
     const row: any | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -13,13 +14,9 @@ export const DefaultColumn = (props: ItemTableListInnerColumn) => {
         return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
     }
 
-    if (typeof row === 'undefined') {
-        return (
-            <TableColumnTextContainer {...props}>
-                <Skeleton />
-            </TableColumnTextContainer>
-        );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
     }
 
-    return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
+    return <ColumnSkeletonFixed {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/duration-column.tsx b/src/renderer/components/item-list/item-table-list/columns/duration-column.tsx
index a0e807b2f..aa0bcb55b 100644
--- a/src/renderer/components/item-list/item-table-list/columns/duration-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/duration-column.tsx
@@ -1,10 +1,11 @@
 import formatDuration from 'format-duration';
 
 import {
+    ColumnNullFallback,
+    ColumnSkeletonFixed,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
 export const DurationColumn = (props: ItemTableListInnerColumn) => {
     const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -17,9 +18,9 @@ export const DurationColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonFixed {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx b/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx
index 54a64a628..aca2787fd 100644
--- a/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx
@@ -4,14 +4,14 @@ import { generatePath, Link } from 'react-router';
 import styles from './genre-badge-column.module.css';
 
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnContainer,
-    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Group } from '/@/shared/components/group/group';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Genre } from '/@/shared/types/domain-types';
 import { stringToColor } from '/@/shared/utils/string-to-color';
 
@@ -53,11 +53,11 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const GenreColumnMemo = memo(GenreBadgeColumn);
diff --git a/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx b/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
index 3269dcb55..920787ea2 100644
--- a/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
@@ -5,12 +5,12 @@ import { generatePath, Link } from 'react-router';
 import styles from './genre-column.module.css';
 
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnContainer,
-    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { AppRoute } from '/@/renderer/router/routes';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 import { Genre } from '/@/shared/types/domain-types';
 
@@ -51,11 +51,11 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const GenreColumnMemo = memo(GenreColumn);
diff --git a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx b/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
index 645ece225..c3493d313 100644
--- a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
@@ -23,7 +23,7 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
 
     return (
         <TableColumnContainer {...props}>
-            <Skeleton containerClassName={styles.skeleton} />
+            <Skeleton containerClassName={styles.skeleton} enableAnimation />
         </TableColumnContainer>
     );
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx b/src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx
index 84cc8c21d..a029c1026 100644
--- a/src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx
@@ -1,8 +1,9 @@
 import {
+    ColumnNullFallback,
+    ColumnSkeletonFixed,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
 export const NumericColumn = (props: ItemTableListInnerColumn) => {
     const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -13,9 +14,9 @@ export const NumericColumn = (props: ItemTableListInnerColumn) => {
         return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonFixed {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/path-column.tsx b/src/renderer/components/item-list/item-table-list/columns/path-column.tsx
index ec4ba0b0c..97b3fe938 100644
--- a/src/renderer/components/item-list/item-table-list/columns/path-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/path-column.tsx
@@ -1,8 +1,9 @@
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
 export const PathColumn = (props: ItemTableListInnerColumn) => {
     const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -16,9 +17,9 @@ export const PathColumn = (props: ItemTableListInnerColumn) => {
         return <TableColumnTextContainer {...props}>{displayPath}</TableColumnTextContainer>;
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/size-column.tsx b/src/renderer/components/item-list/item-table-list/columns/size-column.tsx
index 7f10ca516..81f5937d1 100644
--- a/src/renderer/components/item-list/item-table-list/columns/size-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/size-column.tsx
@@ -1,9 +1,10 @@
 import {
+    ColumnNullFallback,
+    ColumnSkeletonFixed,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { formatSizeString } from '/@/renderer/utils/format';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
 export const SizeColumn = (props: ItemTableListInnerColumn) => {
     const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -16,9 +17,9 @@ export const SizeColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonFixed {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/text-column.tsx b/src/renderer/components/item-list/item-table-list/columns/text-column.tsx
index 97c628b6a..595f15e21 100644
--- a/src/renderer/components/item-list/item-table-list/columns/text-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/text-column.tsx
@@ -3,10 +3,11 @@ import clsx from 'clsx';
 import styles from './text-column.module.css';
 
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
 export const TextColumn = (props: ItemTableListInnerColumn) => {
     const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -27,9 +28,9 @@ export const TextColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
index 4dc1e08cf..96b3835ee 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
@@ -5,11 +5,11 @@ import styles from './title-column.module.css';
 
 import { getTitlePath } from '/@/renderer/components/item-list/helpers/get-title-path';
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnContainer,
-    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 
 export const TitleColumn = (props: ItemTableListInnerColumn) => {
@@ -45,9 +45,9 @@ export const TitleColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
index 5ad1c67fd..cbcbc456f 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
@@ -5,13 +5,13 @@ import styles from './title-combined-column.module.css';
 
 import { getTitlePath } from '/@/renderer/components/item-list/helpers/get-title-path';
 import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
     ItemTableListInnerColumn,
     TableColumnContainer,
-    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Image } from '/@/shared/components/image/image';
-import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 import { RelatedAlbumArtist } from '/@/shared/types/domain-types';
 
@@ -68,9 +68,9 @@ export const TitleCombinedColumn = (props: ItemTableListInnerColumn) => {
         );
     }
 
-    return (
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
 };
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
index ce33248a7..f547f477b 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
@@ -31,6 +31,7 @@ import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table
 import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
 import { ItemControls } from '/@/renderer/components/item-list/types';
 import { Icon } from '/@/shared/components/icon/icon';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 import { TableColumn } from '/@/shared/types/types';
 
@@ -446,3 +447,23 @@ const columnLabelMap: Record<TableColumn, ReactNode | string> = {
     }) as string,
     [TableColumn.YEAR]: i18n.t('table.column.releaseYear', { postProcess: 'upperCase' }) as string,
 };
+
+export const ColumnNullFallback = (props: ItemTableListInnerColumn) => {
+    return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
+};
+
+export const ColumnSkeletonVariable = (props: ItemTableListInnerColumn) => {
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton height="1rem" width={`${props.rowIndex % 2 === 0 ? '80%' : '60%'}`} />
+        </TableColumnContainer>
+    );
+};
+
+export const ColumnSkeletonFixed = (props: ItemTableListInnerColumn) => {
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton height="1rem" width="80%" />
+        </TableColumnContainer>
+    );
+};