From 975ae6bee566ab5deaaaf289f30c9e6f6c46467c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Sat, 17 Aug 2024 15:36:27 +0800 Subject: [PATCH] TEst out react-infinite-scroll-component --- .../templates/library/LibraryContainer.tsx | 19 ++++++++ packages/web/package.json | 1 + yarn.lock | 43 +++++++------------ 3 files changed, 35 insertions(+), 28 deletions(-) diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 6c53bf13b..80c07059d 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -57,6 +57,7 @@ import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl' import { InfiniteData, useQueryClient } from '@tanstack/react-query' import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer' import { Spinner } from '@phosphor-icons/react/dist/ssr' +import InfiniteScroll from 'react-infinite-scroll-component' export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' @@ -809,6 +810,24 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { [itemsPages, multiSelectMode, checkedItems] ) + return ( + Loading...} + endMessage={ +

+ Yay! You have seen it all +

+ } + > + {libraryItems.map((item) => { + return {item.node.title} + })} + + ) + return (