create setFiles proxy which will call original setFiles once per wait interval period

src/pages/gallery/index.tsx

@@ -87,7 +87,7 @@ import FixCreationTime, {
 } from 'components/FixCreationTime';
 import { Collection, CollectionSummaries } from 'types/collection';
 import { EnteFile } from 'types/file';
-import { GalleryContextType, SelectedState } from 'types/gallery';
+import { GalleryContextType, SelectedState, SetFiles } from 'types/gallery';
 import { VISIBILITY_STATE } from 'types/magicMetadata';
 import Collections from 'components/Collections';
 import { GalleryNavbar } from 'components/pages/gallery/Navbar';
@@ -124,12 +124,50 @@ export const GalleryContext = createContext<GalleryContextType>(
     defaultGalleryContext
 );
 
+type FilesFn = EnteFile[] | ((files: EnteFile[]) => EnteFile[]);
+
 export default function Gallery() {
     const router = useRouter();
     const [user, setUser] = useState(null);
     const [collections, setCollections] = useState<Collection[]>(null);
+    const [files, setFilesOriginal] = useState<EnteFile[]>(null);
+
+    const filesUpdateInProgress = useRef(false);
+    const newerFilesFN = useRef<FilesFn>(null);
+
+    const setFilesOriginalWithReSyncIfRequired = (files: EnteFile[]) => {
+        setFilesOriginal(files);
+        filesUpdateInProgress.current = false;
+        if (newerFilesFN.current) {
+            const newerFiles = newerFilesFN.current;
+            setTimeout(() => setFiles(newerFiles), 0);
+            newerFilesFN.current = null;
+        }
+    };
+
+    const setFiles: SetFiles = async (filesFn) => {
+        if (filesUpdateInProgress.current) {
+            newerFilesFN.current = filesFn;
+            return;
+        }
+        filesUpdateInProgress.current = true;
+        setFilesOriginal((previousFiles) => {
+            previousFiles = previousFiles || [];
+            const files =
+                filesFn instanceof Function ? filesFn(previousFiles) : filesFn;
+            console.trace('setFiles', files?.length, previousFiles.length);
+            if (files?.length > 5000 && previousFiles.length > 5000) {
+                const waitTime = getData(LS_KEYS.WAIT_TIME) ?? 5000;
+                setTimeout(() => {
+                    setFilesOriginalWithReSyncIfRequired(files);
+                }, waitTime);
+            } else {
+                setFilesOriginalWithReSyncIfRequired(files);
+            }
+            return previousFiles;
+        });
+    };
 
-    const [files, setFiles] = useState<EnteFile[]>(null);
     const [favItemIds, setFavItemIds] = useState<Set<number>>();
 
     const [isFirstLoad, setIsFirstLoad] = useState(false);

src/utils/storage/localStorage.ts

@@ -19,6 +19,7 @@ export enum LS_KEYS {
     USER_DETAILS = 'userDetails',
     COLLECTION_SORT_BY = 'collectionSortBy',
     THEME = 'theme',
+    WAIT_TIME = 'waitTime',
 }
 
 export const setData = (key: LS_KEYS, value: object) => {