From ab1c8375e3fa2749dfebbd839476cc831b891ab8 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 28 Sep 2024 12:06:01 +0000
Subject: feature(web): Add infinite scrolling support

---
 apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx | 9 +++++++++
 apps/web/package.json                                     | 1 +
 2 files changed, 10 insertions(+)

(limited to 'apps')

diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 89791846..bb3222a7 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/lib/userLocalSettings/bookmarksLayout";
 import tailwindConfig from "@/tailwind.config";
 import { Slot } from "@radix-ui/react-slot";
+import { useInView } from "react-intersection-observer";
 import Masonry from "react-masonry-css";
 import resolveConfig from "tailwindcss/resolveConfig";
 
@@ -51,6 +52,7 @@ export default function BookmarksGrid({
   const layout = useBookmarkLayout();
   const bulkActionsStore = useBulkActionsStore();
   const breakpointConfig = useMemo(() => getBreakpointConfig(), []);
+  const { ref: loadMoreRef, inView: loadMoreButtonInView } = useInView();
 
   useEffect(() => {
     bulkActionsStore.setVisibleBookmarks(bookmarks);
@@ -59,6 +61,12 @@ export default function BookmarksGrid({
     };
   }, [bookmarks]);
 
+  useEffect(() => {
+    if (loadMoreButtonInView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [loadMoreButtonInView]);
+
   if (bookmarks.length == 0 && !showEditorCard) {
     return <p>No bookmarks</p>;
   }
@@ -94,6 +102,7 @@ export default function BookmarksGrid({
       {hasNextPage && (
         <div className="flex justify-center">
           <ActionButton
+            ref={loadMoreRef}
             ignoreDemoMode={true}
             loading={isFetchingNextPage}
             onClick={() => fetchNextPage()}
diff --git a/apps/web/package.json b/apps/web/package.json
index a59d4a48..a153ef3f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -61,6 +61,7 @@
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.50.1",
+    "react-intersection-observer": "^9.13.1",
     "react-markdown": "^9.0.1",
     "react-masonry-css": "^1.0.16",
     "react-select": "^5.8.0",
-- 
cgit v1.2.3-70-g09d2