From c93d406124083cfa31e36e2eccbd0d1aceff1af7 Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Fri, 10 Jan 2025 10:44:42 -0500
Subject: [PATCH] fixed infinite loading issue

---
 src/components/Dataform/Dataform.tsx           | 17 ++++++++++-------
 src/components/Medias/Medias.tsx               | 18 +++++++++++-------
 .../PhotoViewerPopup/PhotoViewerPopup.tsx      |  5 -----
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/Dataform/Dataform.tsx b/src/components/Dataform/Dataform.tsx
index 939ad14..61541f2 100644
--- a/src/components/Dataform/Dataform.tsx
+++ b/src/components/Dataform/Dataform.tsx
@@ -17,7 +17,7 @@ const DataForm = memo(
   ({ scrollDivRef }: { scrollDivRef: React.RefObject<HTMLDivElement> }) => {
     const {
       fetchNextPage: filesFetchNextPage,
-      isFetchingNextPage,
+      isFetchingNextPage: isFetchingNextPageState,
       data: fileList,
       isLoading: isLoadingFiles,
     } = useFiles();
@@ -32,6 +32,7 @@ const DataForm = memo(
     const navigationMap = useAppSelector((state) => {
       return state.selected.navigationMap[window.location.pathname];
     });
+    const isFetchingNextPage = useRef(false);
 
     const isLoading =
       isLoadingFiles ||
@@ -43,19 +44,21 @@ const DataForm = memo(
       if (initialLoad) {
         setInitialLoad(false);
         return;
-      } else if (!fileList) {
+      } else if (!fileList || isFetchingNextPage.current) {
         return;
       }
-      if (reachedIntersect && !isFetchingNextPage && !isLoadingFiles) {
-        filesFetchNextPage();
+      if (reachedIntersect && !isLoadingFiles) {
+        isFetchingNextPage.current = true;
+        filesFetchNextPage().then(() => {
+          isFetchingNextPage.current = false;
+        });
       }
-    }, [reachedIntersect, initialLoad, isFetchingNextPage, isLoadingFiles]);
+    }, [reachedIntersect, initialLoad, isLoadingFiles]);
 
     useEffect(() => {
       if (!isLoading && navigationMap) {
         const scrollTop = navigationMap.scrollTop;
         scrollDivRef.current?.scrollTo(0, scrollTop);
-        console.log("navigation map", navigationMap, scrollTop);
         dispatch(removeNavigationMap(window.location.pathname));
       }
     }, [isLoading, navigationMap]);
@@ -112,7 +115,7 @@ const DataForm = memo(
         {/* @ts-ignore  */}
         <div ref={sentinelRef} className="h-1"></div>
 
-        {isFetchingNextPage && (
+        {isFetchingNextPageState && (
           <div className="w-full flex justify-center items-center mt-4">
             <Spinner />
           </div>
diff --git a/src/components/Medias/Medias.tsx b/src/components/Medias/Medias.tsx
index 29ef7c4..fe9d98d 100644
--- a/src/components/Medias/Medias.tsx
+++ b/src/components/Medias/Medias.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useEffect, useRef, useState } from "react";
 import MediaItem from "../MediaItem/MediaItem";
 import { useFiles } from "../../hooks/files";
 import MultiSelectBar from "../MultiSelectBar/MultiSelectBar";
@@ -13,8 +13,8 @@ const Medias = memo(
   ({ scrollDivRef }: { scrollDivRef: React.RefObject<HTMLDivElement> }) => {
     const {
       data: files,
-      isFetchingNextPage,
       fetchNextPage: filesFetchNextPage,
+      isFetchingNextPage: isFetchingNextPageState,
       isLoading: isLoadingFiles,
     } = useFiles();
     const [initialLoad, setInitialLoad] = useState(true);
@@ -24,6 +24,7 @@ const Medias = memo(
     const navigationMap = useAppSelector((state) => {
       return state.selected.navigationMap[window.location.pathname];
     });
+    const isFetchingNextPage = useRef(false);
 
     const dispatch = useAppDispatch();
 
@@ -31,13 +32,16 @@ const Medias = memo(
       if (initialLoad) {
         setInitialLoad(false);
         return;
-      } else if (!files) {
+      } else if (!files || isFetchingNextPage.current) {
         return;
       }
-      if (reachedIntersect && !isFetchingNextPage && !isLoadingFiles) {
-        filesFetchNextPage();
+      if (reachedIntersect && !isLoadingFiles) {
+        isFetchingNextPage.current = true;
+        filesFetchNextPage().then(() => {
+          isFetchingNextPage.current = false;
+        });
       }
-    }, [reachedIntersect, initialLoad, isFetchingNextPage, isLoadingFiles]);
+    }, [reachedIntersect, initialLoad, isLoadingFiles]);
 
     useEffect(() => {
       if (!initialLoad && navigationMap) {
@@ -155,7 +159,7 @@ const Medias = memo(
             <Spinner />
           </div>
         )}
-        {isFetchingNextPage && (
+        {isFetchingNextPageState && (
           <div className="w-full flex justify-center items-center mt-4">
             <Spinner />
           </div>
diff --git a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
index 9cdb6eb..52f2cdd 100644
--- a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
+++ b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
@@ -229,12 +229,9 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
         );
       } else if (!finalLastPageLoaded.current && !loadingNextPage.current) {
         loadingNextPage.current = true;
-        console.log("fetch next page");
         const newFilesResponse = await fetchNextPage();
-        console.log("new files response", newFilesResponse);
         if (!newFilesResponse.data?.pages) return;
         const fetchedNextItem = findNextFilesItem(newFilesResponse.data);
-        console.log("fetched next item", fetchedNextItem);
         if (fetchedNextItem) {
           dispatch(setPopupSelect({ type: "file", file: fetchedNextItem }));
           dispatch(
@@ -249,7 +246,6 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
           finalLastPageLoaded.current = true;
         }
         loadingNextPage.current = false;
-        console.log("end");
       }
     }
   };
@@ -259,7 +255,6 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
   };
 
   const outterWrapperClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    console.log("outter wrapper click", e.target);
     if ((e.target as HTMLDivElement).id !== "outer-wrapper") {
       return;
     }