vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add dynamic cell skeleton sizing

Browse Source
This commit is contained in:
jeffvli
2025-11-01 02:35:16 -07:00
parent 0e9f9f2fe1
commit c644224072
16 changed files with 120 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx
+7 -7
View File
@@ -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);
src/renderer/components/item-list/item-table-list/columns/artists-column.tsx
+7 -7
View File
@@ -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);
src/renderer/components/item-list/item-table-list/columns/count-column.tsx
+7 -6
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/date-column.tsx
+9 -12
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/default-column.tsx
+5 -8
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/duration-column.tsx
+7 -6
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx
+7 -7
View File
@@ -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);
src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
+7 -7
View File
@@ -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);
src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+1 -1
View File
@@ -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
+7 -6
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/path-column.tsx
+7 -6
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/size-column.tsx
+7 -6
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/text-column.tsx
+7 -6
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/title-column.tsx
+7 -7
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+7 -7
View File
@@ -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} />;
};
src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+21
View File
@@ -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>
);
};