From 9550f96ecfe4683edec5f2daf2cf4aa96ac8c117 Mon Sep 17 00:00:00 2001
From: Ben Hollis <ben@benhollis.net>
Date: Sat, 14 Dec 2024 17:30:51 -0800
Subject: [PATCH] Mildly improve the loadouts virtualizer

---
 src/app/dim-ui/VirtualList.tsx | 6 +++---
 src/app/loadout/Loadouts.tsx   | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/dim-ui/VirtualList.tsx b/src/app/dim-ui/VirtualList.tsx
index 2477b87234..65ebf38f8d 100644
--- 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
index 4a61efed38..8b030ad3eb 100644
--- 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!;