no need to pass complete files list to getThumbnail

src/components/PhotoFrame.tsx

@@ -546,41 +546,31 @@ const PhotoFrame = ({
         }
     };
     const getThumbnail = (
-        files: EnteFile[],
+        item: EnteFile,
         index: number,
         isScrolling: boolean
-    ) =>
+    ) => (
-        files[index] ? (
+        <PreviewCard
-            <PreviewCard
+            key={`tile-${item.id}-selected-${selected[item.id] ?? false}`}
-                key={`tile-${files[index].id}-selected-${
+            file={item}
-                    selected[files[index].id] ?? false
+            updateURL={updateURL(index)}
-                }`}
+            onClick={onThumbnailClick(index)}
-                file={files[index]}
+            onSelect={handleSelect(item.id, item.ownerID === user.id, index)}
-                updateURL={updateURL(index)}
+            selected={
-                onClick={onThumbnailClick(index)}
+                selected.collectionID === activeCollection && selected[item.id]
-                onSelect={handleSelect(
+            }
-                    files[index].id,
+            selectOnClick={selected.count > 0}
-                    files[index].ownerID === user.id,
+            onHover={onHoverOver(index)}
-                    index
+            onRangeSelect={handleRangeSelect(index)}
-                )}
+            isRangeSelectActive={isShiftKeyPressed && selected.count > 0}
-                selected={
+            isInsSelectRange={
-                    selected.collectionID === activeCollection &&
+                (index >= rangeStart && index <= currentHover) ||
-                    selected[files[index].id]
+                (index >= currentHover && index <= rangeStart)
-                }
+            }
-                selectOnClick={selected.count > 0}
+            activeCollection={activeCollection}
-                onHover={onHoverOver(index)}
+            showPlaceholder={isScrolling}
-                onRangeSelect={handleRangeSelect(index)}
+        />
-                isRangeSelectActive={isShiftKeyPressed && selected.count > 0}
+    );
-                isInsSelectRange={
-                    (index >= rangeStart && index <= currentHover) ||
-                    (index >= currentHover && index <= rangeStart)
-                }
-                activeCollection={activeCollection}
-                showPlaceholder={isScrolling}
-            />
-        ) : (
-            <></>
-        );
 
     const getSlideData = async (
         instance: PhotoSwipe<PhotoSwipe.Options>,

src/components/PhotoList.tsx

@@ -163,7 +163,7 @@ interface Props {
     filteredData: EnteFile[];
     showAppDownloadBanner: boolean;
     getThumbnail: (
-        files: EnteFile[],
+        file: EnteFile,
         index: number,
         isScrolling?: boolean
     ) => JSX.Element;
@@ -654,7 +654,7 @@ export function PhotoList({
             case ITEM_TYPE.FILE: {
                 const ret = listItem.items.map((item, idx) =>
                     getThumbnail(
-                        filteredData,
+                        item,
                         listItem.itemStartIndex + idx,
                         isScrolling
                     )