diff options
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx | 9 | ||||
| -rw-r--r-- | apps/web/package.json | 1 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 18 |
3 files changed, 28 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c235ea43..8a867994 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -595,6 +595,9 @@ importers: react-hook-form: specifier: ^7.50.1 version: 7.50.1(react@18.2.0) + react-intersection-observer: + specifier: ^9.13.1 + version: 9.13.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react-markdown: specifier: ^9.0.1 version: 9.0.1(@types/react@18.2.58)(react@18.2.0) @@ -10426,6 +10429,15 @@ packages: peerDependencies: react: ^16.8.0 || ^17 || ^18 + react-intersection-observer@9.13.1: + resolution: {integrity: sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==} + peerDependencies: + react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + react-dom: + optional: true + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -26735,6 +26747,12 @@ snapshots: react: 18.2.0 dev: false + react-intersection-observer@9.13.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + react-is@16.13.1: {} react-is@17.0.2: |