more grid list optimizations

2026-05-07 04:20:12 +02:00 · 2025-10-24 00:05:10 -07:00
parent 62b0ea6616
commit 62127df4f4
2 changed files with 117 additions and 139 deletions
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { AnimatePresence } from 'motion/react';
-import { Dispatch, Fragment, memo, ReactNode, SetStateAction, useState } from 'react';
+import { Fragment, memo, ReactNode, useState } from 'react';
 import { generatePath, Link } from 'react-router';

 import styles from './item-card.module.css';
@@ -44,8 +44,6 @@ export const ItemCard = ({
    type = 'poster',
    withControls,
 }: ItemCardProps) => {
-    const [showControls, setShowControls] = useState(false);
-
    const imageUrl = getImageUrl(data);
    const rows = getDataRows(itemType);

@@ -59,8 +57,6 @@ export const ItemCard = ({
                    isRound={isRound}
                    itemType={itemType}
                    rows={rows}
-                    setShowControls={setShowControls}
-                    showControls={showControls}
                    withControls={withControls}
                />
            );
@@ -73,8 +69,6 @@ export const ItemCard = ({
                    isRound={isRound}
                    itemType={itemType}
                    rows={rows}
-                    setShowControls={setShowControls}
-                    showControls={showControls}
                    withControls={withControls}
                />
            );
@@ -88,8 +82,6 @@ export const ItemCard = ({
                    isRound={isRound}
                    itemType={itemType}
                    rows={rows}
-                    setShowControls={setShowControls}
-                    showControls={showControls}
                    withControls={withControls}
                />
            );
@@ -100,8 +92,6 @@ export interface ItemCardDerivativeProps extends Omit<ItemCardProps, 'type'> {
    controls: ItemControls;
    imageUrl: string | undefined;
    rows: DataRow[];
-    setShowControls: Dispatch<SetStateAction<boolean>>;
-    showControls: boolean;
 }

 const CompactItemCard = ({
@@ -111,10 +101,10 @@ const CompactItemCard = ({
    isRound,
    itemType,
    rows,
-    setShowControls,
-    showControls,
    withControls,
 }: ItemCardDerivativeProps) => {
+    const [showControls, setShowControls] = useState(false);
+
    if (data) {
        return (
            <div className={clsx(styles.container, styles.compact)}>
@@ -170,10 +160,10 @@ const DefaultItemCard = ({
    isRound,
    itemType,
    rows,
-    setShowControls,
-    showControls,
    withControls,
 }: ItemCardDerivativeProps) => {
+    const [showControls, setShowControls] = useState(false);
+
    if (data) {
        return (
            <div className={clsx(styles.container)}>
@@ -229,10 +219,10 @@ const PosterItemCard = ({
    isRound,
    itemType,
    rows,
-    setShowControls,
-    showControls,
    withControls,
 }: ItemCardDerivativeProps) => {
+    const [showControls, setShowControls] = useState(false);
+
    if (data) {
        return (
            <div className={clsx(styles.container, styles.poster)}>
@@ -246,16 +236,14 @@ const PosterItemCard = ({
                        className={clsx(styles.image, { [styles.isRound]: isRound })}
                        src={imageUrl}
                    />
-                    <AnimatePresence>
-                        {withControls && showControls && (
-                            <ItemCardControls
-                                controls={controls}
-                                item={data}
-                                itemType={itemType}
-                                type="poster"
-                            />
-                        )}
-                    </AnimatePresence>
+                    {withControls && showControls && (
+                        <ItemCardControls
+                            controls={controls}
+                            item={data}
+                            itemType={itemType}
+                            type="poster"
+                        />
+                    )}
                </div>
                <div className={styles.detailContainer}>
                    {rows.map((row) => (
@@ -273,7 +261,9 @@ const PosterItemCard = ({
            </div>
            <div className={styles.detailContainer}>
                {rows.map((row) => (
-                    <ItemCardRow data={undefined} key={row.id} row={row} type="poster" />
+                    <div className={styles.row} key={row.id}>
+                        &nbsp;
+                    </div>
                ))}
            </div>
        </div>
@@ -6,6 +6,8 @@ import { AnimatePresence } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import React, {
    CSSProperties,
+    memo,
+    ReactNode,
    Ref,
    UIEvent,
    useCallback,
@@ -28,7 +30,7 @@ import {
    ItemListStateActions,
    useItemListState,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
-import { ItemListHandle } from '/@/renderer/components/item-list/types';
+import { ItemControls, ItemListHandle } from '/@/renderer/components/item-list/types';
 import { LibraryItem } from '/@/shared/types/domain-types';

 interface VirtualizedGridListProps {
@@ -61,40 +63,69 @@ const VirtualizedGridList = React.memo(
        onScroll,
        tableMeta,
    }: VirtualizedGridListProps) => {
-        const elements = useMemo(() => {
-            if (!tableMeta) {
-                return [];
-            }
-
-            return data
-                .map((d, i) => {
-                    return {
-                        data: d,
-                        index: i,
-                    };
-                })
-                .reduce(
-                    (acc, d) => {
-                        if (d.index % (tableMeta?.columnCount || 0) === 0) {
-                            acc.push([]);
-                        }
-                        const prev = acc[acc.length - 1];
-                        prev.push(d);
-                        return acc;
+        const itemProps: GridItemProps = useMemo(() => {
+            return {
+                columns: tableMeta?.columnCount || 0,
+                controls: {
+                    onClick: enableSelection
+                        ? (item, itemType) => {
+                              return itemListControls.handleItemClick(
+                                  item,
+                                  itemType,
+                                  internalState,
+                              );
+                          }
+                        : undefined,
+                    onDoubleClick: (item, itemType) => {
+                        return itemListControls.handleItemDoubleClick(
+                            item,
+                            itemType,
+                            internalState,
+                        );
                    },
-                    [] as { data: any; index: number }[][],
-                );
-        }, [tableMeta, data]);
-
-        const itemProps: GridItemProps = {
-            columns: tableMeta?.columnCount || 0,
-            data: elements,
+                    onFavorite: (item, itemType) => {
+                        return itemListControls.handleItemFavorite(item, itemType, internalState);
+                    },
+                    onItemExpand: enableExpansion
+                        ? (item, itemType) => {
+                              return itemListControls.handleItemExpand(
+                                  item,
+                                  itemType,
+                                  internalState,
+                              );
+                          }
+                        : undefined,
+                    onMore: (item, itemType) => {
+                        return itemListControls.handleItemMore(item, itemType, internalState);
+                    },
+                    onPlay: (item, itemType, playType) => {
+                        return itemListControls.handleItemPlay(
+                            item,
+                            itemType,
+                            playType,
+                            internalState,
+                        );
+                    },
+                    onRating: (item, itemType) => {
+                        return itemListControls.handleItemRating(item, itemType, internalState);
+                    },
+                },
+                data,
+                enableExpansion,
+                enableSelection,
+                gap,
+                internalState,
+                itemType,
+            };
+        }, [
+            data,
+            tableMeta?.columnCount,
            enableExpansion,
            enableSelection,
            gap,
            internalState,
            itemType,
-        };
+        ]);

        return (
            <List
@@ -112,7 +143,6 @@ const VirtualizedGridList = React.memo(

 VirtualizedGridList.displayName = 'VirtualizedGridList';

-// Throttled function moved outside component for better performance
 const createThrottledSetTableMeta = (itemsPerRow?: number) => {
    return throttle(
        (
@@ -170,6 +200,7 @@ const createThrottledSetTableMeta = (itemsPerRow?: number) => {

 export interface GridItemProps {
    columns: number;
+    controls: ItemControls;
    data: any[];
    enableExpansion?: boolean;
    enableSelection?: boolean;
@@ -427,88 +458,45 @@ export const ItemGridList = ({
    );
 };

-const ListComponent = ({
-    columns,
-    data,
-    enableExpansion,
-    enableSelection,
-    gap,
-    index,
-    internalState,
-    itemType,
-    style,
-}: RowComponentProps<GridItemProps>) => {
-    return (
-        <div className={styles.itemList} style={style}>
-            {data[index].map((d) => (
+const ListComponent = memo(
+    ({
+        columns,
+        controls,
+        data,
+        gap,
+        index,
+        itemType,
+        style,
+    }: RowComponentProps<GridItemProps>) => {
+        const items: ReactNode[] = [];
+        const itemCount = data.length;
+        const startIndex = index * columns;
+        const stopIndex = Math.min(itemCount - 1, startIndex + columns - 1);
+
+        const columnCountInRow = stopIndex - startIndex + 1;
+
+        let columnCountToAdd = 0;
+
+        if (columnCountInRow !== columns) {
+            columnCountToAdd = columns - columnCountInRow;
+        }
+
+        for (let i = startIndex; i <= stopIndex + columnCountToAdd; i += 1) {
+            items.push(
                <div
                    className={clsx(styles.itemRow, styles[`gap-${gap}`])}
-                    key={d.index}
+                    key={`card-${i}-${index}`}
                    style={{ '--columns': columns } as CSSProperties}
                >
-                    <ItemCard
-                        controls={{
-                            onClick: enableSelection
-                                ? (item, itemType) => {
-                                      return itemListControls.handleItemClick(
-                                          item,
-                                          itemType,
-                                          internalState,
-                                      );
-                                  }
-                                : undefined,
-                            onDoubleClick: (item, itemType) => {
-                                return itemListControls.handleItemDoubleClick(
-                                    item,
-                                    itemType,
-                                    internalState,
-                                );
-                            },
-                            onFavorite: (item, itemType) => {
-                                return itemListControls.handleItemFavorite(
-                                    item,
-                                    itemType,
-                                    internalState,
-                                );
-                            },
-                            onItemExpand: enableExpansion
-                                ? (item, itemType) => {
-                                      return itemListControls.handleItemExpand(
-                                          item,
-                                          itemType,
-                                          internalState,
-                                      );
-                                  }
-                                : undefined,
-                            onMore: (item, itemType) => {
-                                return itemListControls.handleItemMore(
-                                    item,
-                                    itemType,
-                                    internalState,
-                                );
-                            },
-                            onPlay: (item, itemType, playType) => {
-                                return itemListControls.handleItemPlay(
-                                    item,
-                                    itemType,
-                                    playType,
-                                    internalState,
-                                );
-                            },
-                            onRating: (item, itemType) => {
-                                return itemListControls.handleItemRating(
-                                    item,
-                                    itemType,
-                                    internalState,
-                                );
-                            },
-                        }}
-                        data={d.data}
-                        itemType={itemType}
-                        withControls
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
+                    <ItemCard controls={controls} data={data[i]} itemType={itemType} withControls />
+                </div>,
+            );
+        }
+
+        return (
+            <div className={styles.itemList} style={style}>
+                {items}
+            </div>
+        );
+    },
+);