Mildly improve the loadouts virtualizer

DestinyItemManager · Dec 15, 2024 · 9550f96 · 9550f96
1 parent 3b04bf5
commit 9550f96
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/app/dim-ui/VirtualList.tsx b/src/app/dim-ui/VirtualList.tsx
@@ -5,7 +5,7 @@ import styles from './VirtualList.m.scss';
 
 interface VirtualListProps {
   numElements: number;
-  estimatedSize: number;
+  estimatedSize: number | ((index: number) => number);
   className?: string;
   itemContainerClassName?: string;
   /**
@@ -46,7 +46,7 @@ export const VirtualList = forwardRef(function VirtualList(
   const virtualizer = useVirtualizer({
     count: numElements,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => estimatedSize,
+    estimateSize: typeof estimatedSize === 'function' ? estimatedSize : () => estimatedSize,
     getItemKey,
     overscan,
   });
@@ -124,7 +124,7 @@ export const WindowVirtualList = forwardRef(function WindowVirtualList(
 
   const virtualizer = useWindowVirtualizer({
     count: numElements,
-    estimateSize: () => estimatedSize,
+    estimateSize: typeof estimatedSize === 'function' ? estimatedSize : () => estimatedSize,
     scrollMargin: parentOffsetRef.current,
     scrollPaddingStart: headerHeightRef.current,
     getItemKey,

diff --git a/src/app/loadout/Loadouts.tsx b/src/app/loadout/Loadouts.tsx
@@ -237,7 +237,9 @@ function Loadouts({ account }: { account: DestinyAccount }) {
           ref={virtualListRef}
           numElements={loadoutRows.length}
           itemContainerClassName={styles.loadoutRow}
-          estimatedSize={270}
+          estimatedSize={(index) =>
+            'id' in loadoutRows[index] ? (isPhonePortrait ? 1450 : 300) : 51
+          }
           getItemKey={(index) => {
             const loadoutOrSeason = loadoutRows[index];
             return 'id' in loadoutOrSeason ? loadoutOrSeason.id : loadoutOrSeason.startDate!;