have seperate state to keep track of running loader

src/components/PhotoFrame.tsx

@@ -60,7 +60,6 @@ interface Props {
     selected: SelectedState;
     isFirstLoad;
     openFileUploader;
-    loadingBar;
     isInSearchMode: boolean;
     search: Search;
     setSearchStats: setSearchStats;
@@ -78,7 +77,6 @@ const PhotoFrame = ({
     selected,
     isFirstLoad,
     openFileUploader,
-    loadingBar,
     isInSearchMode,
     search,
     setSearchStats,
@@ -488,7 +486,6 @@ const PhotoFrame = ({
                         onClose={handleClose}
                         gettingData={getSlideData}
                         favItemIds={favItemIds}
-                        loadingBar={loadingBar}
                         isSharedCollection={isSharedCollection}
                         isTrashCollection={activeCollection === TRASH_SECTION}
                     />

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -45,6 +45,7 @@ import EnteDateTimePicker from 'components/EnteDateTimePicker';
 import { MAX_EDITED_FILE_NAME_LENGTH } from 'constants/file';
 import { sleep } from 'utils/common';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
+import { GalleryContext } from 'pages/gallery';
 
 const SmallLoadingSpinner = () => (
     <EnteSpinner
@@ -63,7 +64,6 @@ interface Iprops {
     id?: string;
     className?: string;
     favItemIds: Set<number>;
-    loadingBar: any;
     isSharedCollection: boolean;
     isTrashCollection: boolean;
 }
@@ -487,6 +487,7 @@ function PhotoSwipe(props: Iprops) {
     const publicCollectionGalleryContext = useContext(
         PublicCollectionGalleryContext
     );
+    const galleryContext = useContext(GalleryContext);
 
     useEffect(() => {
         if (!pswpElement) return;
@@ -670,15 +671,14 @@ function PhotoSwipe(props: Iprops) {
     };
 
     const downloadFileHelper = async (file) => {
-        const { loadingBar } = props;
-        loadingBar.current?.continuousStart();
+        galleryContext.startLoading();
         await downloadFile(
             file,
             publicCollectionGalleryContext.accessedThroughSharedURL,
             publicCollectionGalleryContext.token
         );
 
-        loadingBar.current?.complete();
+        galleryContext.finishLoading();
     };
     const scheduleUpdate = () => (needUpdate.current = true);
     const { id } = props;

src/components/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import AsyncSelect from 'react-select/async';
 import { components } from 'react-select';
@@ -27,6 +27,7 @@ import { EnteFile } from 'types/file';
 import { Suggestion, SuggestionType, DateValue, Bbox } from 'types/search';
 import { Search, SearchStats } from 'types/gallery';
 import { FILE_TYPE } from 'constants/file';
+import { GalleryContext } from 'pages/gallery';
 
 const Wrapper = styled.div<{ isDisabled: boolean; isOpen: boolean }>`
     position: fixed;
@@ -81,7 +82,6 @@ interface Props {
     isOpen: boolean;
     isFirstFetch: boolean;
     setOpen: (value: boolean) => void;
-    loadingBar: any;
     setSearch: (search: Search) => void;
     searchStats: SearchStats;
     collections: Collection[];
@@ -90,7 +90,7 @@ interface Props {
 }
 export default function SearchBar(props: Props) {
     const [value, setValue] = useState<Suggestion>(null);
-
+    const galleryContext = useContext(GalleryContext);
     const handleChange = (value) => {
         setValue(value);
     };
@@ -192,10 +192,10 @@ export default function SearchBar(props: Props) {
     };
     const resetSearch = () => {
         if (props.isOpen) {
-            props.loadingBar.current?.continuousStart();
+            galleryContext.startLoading();
             props.setSearch({});
             setTimeout(() => {
-                props.loadingBar.current?.complete();
+                galleryContext.finishLoading();
             }, 10);
             props.setOpen(false);
             setValue(null);

src/pages/gallery/index.tsx

@@ -178,6 +178,7 @@ export default function Gallery() {
     const loadingBar = useRef(null);
     const [isInSearchMode, setIsInSearchMode] = useState(false);
     const [searchStats, setSearchStats] = useState(null);
+    const isLoadingBarRunning = useRef(true);
     const syncInProgress = useRef(true);
     const resync = useRef(false);
     const [deleted, setDeleted] = useState<number[]>([]);
@@ -278,7 +279,7 @@ export default function Gallery() {
             if (!(await isTokenValid())) {
                 throw new Error(ServerErrorCodes.SESSION_EXPIRED);
             }
-            !silent && loadingBar.current?.continuousStart();
+            !silent && startLoading();
             await billingService.syncSubscription();
             const collections = await syncCollections();
             setCollections(collections);
@@ -308,7 +309,7 @@ export default function Gallery() {
                     break;
             }
         } finally {
-            !silent && loadingBar.current?.complete();
+            !silent && finishLoading();
         }
         syncInProgress.current = false;
         if (resync.current) {
@@ -342,10 +343,14 @@ export default function Gallery() {
         setSelected({ count: 0, collectionID: 0 });
     };
 
-    const startLoading = () =>
-        !syncInProgress.current && loadingBar.current?.continuousStart();
-    const finishLoading = () =>
-        !syncInProgress.current && loadingBar.current.complete();
+    const startLoading = () => {
+        !isLoadingBarRunning.current && loadingBar.current?.continuousStart();
+        isLoadingBarRunning.current = true;
+    };
+    const finishLoading = () => {
+        loadingBar.current?.complete();
+        isLoadingBarRunning.current = false;
+    };
 
     if (!files) {
         return <div />;
@@ -581,7 +586,6 @@ export default function Gallery() {
                 <SearchBar
                     isOpen={isInSearchMode}
                     setOpen={setIsInSearchMode}
-                    loadingBar={loadingBar}
                     isFirstFetch={isFirstFetch}
                     collections={collections}
                     files={getNonTrashedUniqueUserFiles(files)}
@@ -662,7 +666,6 @@ export default function Gallery() {
                     selected={selected}
                     isFirstLoad={isFirstLoad}
                     openFileUploader={openFileUploader}
-                    loadingBar={loadingBar}
                     isInSearchMode={isInSearchMode}
                     search={search}
                     setSearchStats={setSearchStats}

src/pages/shared-albums/index.tsx

@@ -156,7 +156,6 @@ export default function PublicCollectionGallery() {
                 selected={{ count: 0, collectionID: null }}
                 isFirstLoad={false}
                 openFileUploader={() => null}
-                loadingBar={loadingBar}
                 isInSearchMode={false}
                 search={{}}
                 setSearchStats={() => null}