diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index c34a78db5..6925b5fd0 100644 --- a/src/pages/gallery/index.tsx +++ b/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( defaultGalleryContext ); +type FilesFn = EnteFile[] | ((files: EnteFile[]) => EnteFile[]); + export default function Gallery() { const router = useRouter(); const [user, setUser] = useState(null); const [collections, setCollections] = useState(null); + const [files, setFilesOriginal] = useState(null); + + const filesUpdateInProgress = useRef(false); + const newerFilesFN = useRef(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(null); const [favItemIds, setFavItemIds] = useState>(); const [isFirstLoad, setIsFirstLoad] = useState(false); diff --git a/src/utils/storage/localStorage.ts b/src/utils/storage/localStorage.ts index 04443b1db..3e4a53c13 100644 --- a/src/utils/storage/localStorage.ts +++ b/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) => {