diff options
| author | MohamedBassem <me@mbassem.com> | 2024-09-28 12:06:01 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-09-28 12:06:01 +0000 |
| commit | ab1c8375e3fa2749dfebbd839476cc831b891ab8 (patch) | |
| tree | a87537937d15c51e2ef86bbc56c3ca63d4a643f5 /apps | |
| parent | 41f4e6b2dae104fd19009a70a280a45f776c3d30 (diff) | |
| download | karakeep-ab1c8375e3fa2749dfebbd839476cc831b891ab8.tar.zst | |
feature(web): Add infinite scrolling support
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx | 9 | ||||
| -rw-r--r-- | apps/web/package.json | 1 |
2 files changed, 10 insertions, 0 deletions
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", |