add dynamic cell skeleton sizing

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn);

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const ArtistsColumnMemo = memo(ArtistsColumn);

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonFixed {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    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 (
+    return <ColumnSkeletonFixed {...props} />;
-        <TableColumnTextContainer {...props}>
-            <Skeleton />
-        </TableColumnTextContainer>
-    );
 };

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') {
+    if (row === null) {
-        return (
+        return <ColumnNullFallback {...props} />;
-            <TableColumnTextContainer {...props}>
-                <Skeleton />
-            </TableColumnTextContainer>
-        );
     }
 
-    return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
+    return <ColumnSkeletonFixed {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonFixed {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const GenreColumnMemo = memo(GenreBadgeColumn);

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };
 
 export const GenreColumnMemo = memo(GenreColumn);

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>
     );
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonFixed {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonFixed {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };

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 (
+    if (row === null) {
-        <TableColumnTextContainer {...props}>
+        return <ColumnNullFallback {...props} />;
-            <Skeleton />
+    }
-        </TableColumnTextContainer>
+
-    );
+    return <ColumnSkeletonVariable {...props} />;
 };

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>
+    );
+};