add logic to show placeholder when user is scrolling

src/components/PhotoFrame.tsx

@@ -426,7 +426,11 @@ const PhotoFrame = ({
             handleSelect(filteredData[index].id, index)(!checked);
         }
     };
-    const getThumbnail = (files: EnteFile[], index: number) =>
+    const getThumbnail = (
+        files: EnteFile[],
+        index: number,
+        isScrolling: boolean
+    ) =>
         files[index] ? (
             <PreviewCard
                 key={`tile-${files[index].id}-selected-${
@@ -450,6 +454,7 @@ const PhotoFrame = ({
                     (index >= currentHover && index <= rangeStart)
                 }
                 activeCollection={activeCollection}
+                showPlaceholder={isScrolling}
             />
         ) : (
             <></>

src/components/PhotoList.tsx

@@ -24,7 +24,7 @@ import { GalleryContext } from 'pages/gallery';
 import { SpecialPadding } from 'styles/SpecialPadding';
 
 const A_DAY = 24 * 60 * 60 * 1000;
-// const NO_OF_PAGES = 2;
+const NO_OF_PAGES = 1;
 const FOOTER_HEIGHT = 90;
 
 export enum ITEM_TYPE {
@@ -153,7 +153,11 @@ interface Props {
     width: number;
     filteredData: EnteFile[];
     showAppDownloadBanner: boolean;
-    getThumbnail: (files: EnteFile[], index: number) => JSX.Element;
+    getThumbnail: (
+        files: EnteFile[],
+        index: number,
+        isScrolling?: boolean
+    ) => JSX.Element;
     activeCollection: number;
     resetFetching: () => void;
 }
@@ -512,9 +516,9 @@ export function PhotoList({
         }
     };
 
-    // const extraRowsToRender = Math.ceil(
-    //     (NO_OF_PAGES * height) / IMAGE_CONTAINER_MAX_HEIGHT
-    // );
+    const extraRowsToRender = Math.ceil(
+        (NO_OF_PAGES * height) / IMAGE_CONTAINER_MAX_HEIGHT
+    );
 
     const generateKey = (index) => {
         switch (timeStampList[index].itemType) {
@@ -527,7 +531,10 @@ export function PhotoList({
         }
     };
 
-    const renderListItem = (listItem: TimeStampListItem) => {
+    const renderListItem = (
+        listItem: TimeStampListItem,
+        isScrolling: boolean
+    ) => {
         switch (listItem.itemType) {
             case ITEM_TYPE.TIME:
                 return listItem.dates ? (
@@ -556,7 +563,8 @@ export function PhotoList({
                 const ret = listItem.items.map((item, idx) =>
                     getThumbnail(
                         filteredDataCopy,
-                        listItem.itemStartIndex + idx
+                        listItem.itemStartIndex + idx,
+                        isScrolling
                     )
                 );
                 if (listItem.groups) {
@@ -587,14 +595,15 @@ export function PhotoList({
             width={width}
             itemCount={timeStampList.length}
             itemKey={generateKey}
-            overscanCount={0}>
-            {({ index, style }) => (
+            overscanCount={extraRowsToRender}
+            useIsScrolling>
+            {({ index, style, isScrolling }) => (
                 <ListItem style={style}>
                     <ListContainer
                         columns={columns}
                         shrinkRatio={shrinkRatio}
                         groups={timeStampList[index].groups}>
-                        {renderListItem(timeStampList[index])}
+                        {renderListItem(timeStampList[index], isScrolling)}
                     </ListContainer>
                 </ListItem>
             )}

src/components/pages/gallery/PreviewCard.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
+import React, { useContext, useLayoutEffect, useState } from 'react';
 import { EnteFile } from 'types/file';
 import { styled } from '@mui/material';
 import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
@@ -18,18 +18,18 @@ import { formatDateRelative } from 'utils/time';
 
 interface IProps {
     file: EnteFile;
-    updateURL?: (url: string) => EnteFile;
-    onClick?: () => void;
-    forcedEnable?: boolean;
-    selectable?: boolean;
-    selected?: boolean;
-    onSelect?: (checked: boolean) => void;
-    onHover?: () => void;
-    onRangeSelect?: () => void;
-    isRangeSelectActive?: boolean;
-    selectOnClick?: boolean;
-    isInsSelectRange?: boolean;
-    activeCollection?: number;
+    updateURL: (url: string) => EnteFile;
+    onClick: () => void;
+    selectable: boolean;
+    selected: boolean;
+    onSelect: (checked: boolean) => void;
+    onHover: () => void;
+    onRangeSelect: () => void;
+    isRangeSelectActive: boolean;
+    selectOnClick: boolean;
+    isInsSelectRange: boolean;
+    activeCollection: number;
+    showPlaceholder: boolean;
 }
 
 const Check = styled('input')<{ active: boolean }>`
@@ -203,7 +203,6 @@ export default function PreviewCard(props: IProps) {
         file,
         onClick,
         updateURL,
-        forcedEnable,
         selectable,
         selected,
         onSelect,
@@ -213,14 +212,13 @@ export default function PreviewCard(props: IProps) {
         isRangeSelectActive,
         isInsSelectRange,
     } = props;
-    const isMounted = useRef(true);
     const publicCollectionGalleryContext = useContext(
         PublicCollectionGalleryContext
     );
     const deduplicateContext = useContext(DeduplicateContext);
 
     useLayoutEffect(() => {
-        if (file && !file.msrc) {
+        if (file && !file.msrc && !props.showPlaceholder) {
             const main = async () => {
                 try {
                     let url;
@@ -236,18 +234,14 @@ export default function PreviewCard(props: IProps) {
                     } else {
                         url = await DownloadManager.getThumbnail(file);
                     }
-                    if (isMounted.current) {
                     setImgSrc(url);
                     thumbs.set(file.id, url);
-                        if (updateURL) {
                     const newFile = updateURL(url);
                     file.msrc = newFile.msrc;
                     file.html = newFile.html;
                     file.src = newFile.src;
                     file.w = newFile.w;
                     file.h = newFile.h;
-                        }
-                    }
                 } catch (e) {
                     logError(e, 'preview card useEffect failed');
                     // no-op
@@ -262,12 +256,7 @@ export default function PreviewCard(props: IProps) {
                 main();
             }
         }
-
-        return () => {
-            // cool cool cool
-            isMounted.current = false;
-        };
-    }, [file]);
+    }, [file, props.showPlaceholder]);
 
     const handleClick = () => {
         if (selectOnClick) {
@@ -300,10 +289,10 @@ export default function PreviewCard(props: IProps) {
 
     return (
         <Cont
-            id={`thumb-${file?.id}`}
+            id={`thumb-${file?.id}-${props.showPlaceholder}`}
             onClick={handleClick}
             onMouseEnter={handleHover}
-            disabled={!forcedEnable && !file?.msrc && !imgSrc}
+            disabled={!file?.msrc && !imgSrc}
             {...(selectable ? useLongPress(longPressCallback, 500) : {})}>
             {selectable && (
                 <Check