fix: add infinite scroll to view my nfts filter panel (#5216)

* infinite_scroll_working

* fix

* remove extra

* add infinite loading

* working

* remove null

* filter button text fixes

* respond to charlie plus mobile tooltip fixes

* make filter bar sticky

* respond to charlie

package.json

@@ -131,6 +131,7 @@
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@types/react-relay": "^13.0.2",
+    "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "1.1.1",
     "@uniswap/analytics-events": "1.1.0",
     "@uniswap/conedison": "^1.1.0",
@@ -215,6 +216,7 @@
     "react-use-gesture": "^6.0.14",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
+    "react-window-infinite-loader": "^1.0.8",
     "rebass": "^4.0.7",
     "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",

src/nft/components/bag/Bag.tsx

@@ -282,7 +282,7 @@ const Bag = () => {
 
   return (
     <Portal>
-      <Column zIndex={isMobile || isOpen ? 'modal' : '3'} className={styles.bagContainer}>
+      <Column zIndex={isMobile || isOpen ? 'modalOverTooltip' : '3'} className={styles.bagContainer}>
         {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
           <>
             <BagHeader

src/nft/components/profile/view/FilterSidebar.tsx

 import { ScrollBarStyles } from 'components/Common'
+import { LoadingBubble } from 'components/Tokens/loading'
 import { AnimatedBox, Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { XMarkIcon } from 'nft/components/icons'
 import { Checkbox } from 'nft/components/layout/Checkbox'
+import { checkbox } from 'nft/components/layout/Checkbox.css'
 import { Input } from 'nft/components/layout/Input'
 import { subhead } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useFiltersExpanded, useIsMobile, useWalletCollections } from 'nft/hooks'
 import { WalletCollection } from 'nft/types'
-import { Dispatch, FormEvent, SetStateAction, useCallback, useEffect, useReducer, useState } from 'react'
+import { CSSProperties, Dispatch, FormEvent, SetStateAction, useCallback, useEffect, useReducer, useState } from 'react'
 import { easings, useSpring } from 'react-spring'
+import AutoSizer from 'react-virtualized-auto-sizer'
+import { FixedSizeList, ListOnItemsRenderedProps } from 'react-window'
+import InfiniteLoader from 'react-window-infinite-loader'
 import styled from 'styled-components/macro'
 import { TRANSITION_DURATIONS } from 'theme/styles'
 
 import * as styles from './ProfilePage.css'
 
-const ItemsContainer = styled.div`
+const COLLECTION_ROW_HEIGHT = 44
+
+const ItemsContainer = styled(Column)`
   ${ScrollBarStyles}
-  overflow-y: auto;
+  height: 100vh;
+`
+
+const LongLoadingBubble = styled(LoadingBubble)`
+  min-height: 15px;
+  width: 75%;
 `
 
-export const FilterSidebar = () => {
+const SmallLoadingBubble = styled(LoadingBubble)`
+  height: 20px;
+  width: 20px;
+  margin-right: 8px;
+`
+
+const LoadingCollectionItem = ({ style }: { style?: CSSProperties }) => {
+  return (
+    <Row display="flex" justifyContent="space-between" style={style} paddingLeft="12" paddingRight="16">
+      <Row display="flex" flex="1">
+        <SmallLoadingBubble />
+        <LongLoadingBubble />
+      </Row>
+      <Box as="span" borderColor="backgroundOutline" className={checkbox} aria-hidden="true" />
+    </Row>
+  )
+}
+
+interface CollectionFilterRowProps {
+  index: number
+  style: CSSProperties
+}
+
+interface FilterSidebarProps {
+  fetchNextPage: () => void
+  hasNextPage?: boolean
+  isFetchingNextPage: boolean
+  walletCollections: WalletCollection[]
+}
+
+export const FilterSidebar = ({
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
+  walletCollections,
+}: FilterSidebarProps) => {
   const collectionFilters = useWalletCollections((state) => state.collectionFilters)
   const setCollectionFilters = useWalletCollections((state) => state.setCollectionFilters)
-  const walletCollections = useWalletCollections((state) => state.walletCollections)
 
   const [isFiltersExpanded, setFiltersExpanded] = useFiltersExpanded()
   const isMobile = useIsMobile()
@@ -38,8 +84,8 @@ export const FilterSidebar = () => {
   return (
     // @ts-ignore
     <AnimatedBox
-      position={{ sm: 'fixed', md: 'sticky' }}
-      top={{ sm: '40', md: 'unset' }}
+      position="sticky"
+      top="72"
       left={{ sm: '0', md: 'unset' }}
       width={{ sm: 'full', md: '332', lg: '332' }}
       height={{ sm: 'full', md: 'auto' }}
@@ -70,6 +116,9 @@ export const FilterSidebar = () => {
           collections={walletCollections}
           collectionFilters={collectionFilters}
           setCollectionFilters={setCollectionFilters}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
         />
       </Box>
     </AnimatedBox>
@@ -80,10 +129,16 @@ const CollectionSelect = ({
   collections,
   collectionFilters,
   setCollectionFilters,
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
 }: {
   collections: WalletCollection[]
   collectionFilters: Array<string>
   setCollectionFilters: (address: string) => void
+  fetchNextPage: () => void
+  hasNextPage?: boolean
+  isFetchingNextPage: boolean
 }) => {
   const [collectionSearchText, setCollectionSearchText] = useState('')
   const [displayCollections, setDisplayCollections] = useState(collections)
@@ -99,6 +154,44 @@ const CollectionSelect = ({
     }
   }, [collectionSearchText, collections])
 
+  const itemKey = useCallback((index: number, data: WalletCollection[]) => {
+    if (!data) return index
+    const collection = data[index]
+    return `${collection.address}_${index}`
+  }, [])
+
+  // If there are more items to be loaded then add an extra row to hold a loading indicator.
+  const itemCount = hasNextPage ? displayCollections.length + 1 : displayCollections.length
+
+  // Only load 1 page of items at a time.
+  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
+  const loadMoreItems = isFetchingNextPage ? () => null : fetchNextPage
+
+  // Every row is loaded except for our loading indicator row.
+  const isItemLoaded = useCallback(
+    (index: number) => !hasNextPage || index < displayCollections.length,
+    [displayCollections.length, hasNextPage]
+  )
+
+  const CollectionFilterRow = useCallback(
+    ({ index, style }: CollectionFilterRowProps) => {
+      const collection = !!displayCollections && displayCollections[index]
+      if (!collection || isFetchingNextPage) {
+        return <LoadingCollectionItem style={style} key={index} />
+      }
+      return (
+        <CollectionItem
+          style={style}
+          key={itemKey(index, displayCollections)}
+          collection={displayCollections[index]}
+          collectionFilters={collectionFilters}
+          setCollectionFilters={setCollectionFilters}
+        />
+      )
+    },
+    [displayCollections, isFetchingNextPage, itemKey, collectionFilters, setCollectionFilters]
+  )
+
   return (
     <>
       <Box className={subhead} marginTop="12" marginBottom="16" width="276">
@@ -111,16 +204,31 @@ const CollectionSelect = ({
             setCollectionSearchText={setCollectionSearchText}
           />
           <ItemsContainer>
-            <Box paddingBottom="8" style={{ scrollbarWidth: 'none' }}>
-              {displayCollections?.map((collection) => (
-                <CollectionItem
-                  key={collection.address}
-                  collection={collection}
-                  collectionFilters={collectionFilters}
-                  setCollectionFilters={setCollectionFilters}
-                />
-              ))}
-            </Box>
+            <AutoSizer disableWidth>
+              {({ height }) => (
+                <InfiniteLoader isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems}>
+                  {({
+                    onItemsRendered,
+                    ref,
+                  }: {
+                    onItemsRendered: (props: ListOnItemsRenderedProps) => any
+                    ref: any
+                  }) => (
+                    <FixedSizeList
+                      height={height}
+                      width="100%"
+                      itemCount={itemCount}
+                      itemSize={COLLECTION_ROW_HEIGHT}
+                      onItemsRendered={onItemsRendered}
+                      itemKey={itemKey}
+                      ref={ref}
+                    >
+                      {CollectionFilterRow}
+                    </FixedSizeList>
+                  )}
+                </InfiniteLoader>
+              )}
+            </AutoSizer>
           </ItemsContainer>
         </Column>
       </Box>
@@ -153,10 +261,12 @@ const CollectionItem = ({
   collection,
   collectionFilters,
   setCollectionFilters,
+  style,
 }: {
   collection: WalletCollection
   collectionFilters: Array<string>
   setCollectionFilters: (address: string) => void
+  style?: CSSProperties
 }) => {
   const [isCheckboxSelected, setCheckboxSelected] = useState(false)
   const [hovered, toggleHovered] = useReducer((state) => {
@@ -187,8 +297,9 @@ const CollectionItem = ({
       style={{
         paddingBottom: '22px',
         paddingTop: '22px',
+        ...style,
       }}
-      maxHeight="44"
+      maxHeight={`${COLLECTION_ROW_HEIGHT}`}
       as="li"
       onMouseEnter={toggleHovered}
       onMouseLeave={toggleHovered}

src/nft/components/profile/view/ProfilePage.tsx

@@ -7,20 +7,14 @@ import { Center, Column, Row } from 'nft/components/Flex'
 import { CrossIcon } from 'nft/components/icons'
 import { FilterSidebar } from 'nft/components/profile/view/FilterSidebar'
 import { subhead } from 'nft/css/common.css'
-import {
-  useBag,
-  useFiltersExpanded,
-  useIsMobile,
-  useSellAsset,
-  useWalletBalance,
-  useWalletCollections,
-} from 'nft/hooks'
+import { useBag, useFiltersExpanded, useIsMobile, useSellAsset, useWalletCollections } from 'nft/hooks'
+import { useWalletBalance } from 'nft/hooks'
 import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css'
 import { OSCollectionsFetcher } from 'nft/queries'
 import { WalletCollection } from 'nft/types'
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
-import { useQuery } from 'react-query'
+import { useInfiniteQuery } from 'react-query'
 import { easings, useSpring } from 'react-spring'
 import styled from 'styled-components/macro'
 import shallow from 'zustand/shallow'
@@ -49,6 +43,7 @@ const ProfileHeader = styled.div`
 `
 
 export const DEFAULT_WALLET_ASSET_QUERY_AMOUNT = 25
+const WALLET_COLLECTIONS_PAGINATION_LIMIT = 300
 const FILTER_SIDEBAR_WIDTH = 300
 const PADDING = 16
 
@@ -72,13 +67,33 @@ export const ProfilePage = () => {
   const isMobile = useIsMobile()
   const [currentTokenPlayingMedia, setCurrentTokenPlayingMedia] = useState<string | undefined>()
 
-  const { data: ownerCollections } = useQuery(
-    ['ownerCollections', address],
-    () => OSCollectionsFetcher({ params: { asset_owner: address, offset: '0', limit: '300' } }),
-    {
-      refetchOnWindowFocus: false,
+  const getOwnerCollections = async ({ pageParam = 0 }) => {
+    const res = await OSCollectionsFetcher({
+      params: {
+        asset_owner: address,
+        offset: `${pageParam * WALLET_COLLECTIONS_PAGINATION_LIMIT}`,
+        limit: `${WALLET_COLLECTIONS_PAGINATION_LIMIT}`,
+      },
+    })
+    return {
+      data: res,
+      nextPage: pageParam + 1,
     }
-  )
+  }
+
+  const {
+    data: ownerCollectionsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isSuccess,
+  } = useInfiniteQuery(['ownerCollections', { address }], getOwnerCollections, {
+    getNextPageParam: (lastGroup, _allGroups) => (lastGroup.data.length === 0 ? undefined : lastGroup.nextPage),
+    refetchInterval: 15000,
+    refetchIntervalInBackground: false,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  })
 
   const {
     walletAssets: ownerAssets,
@@ -86,6 +101,11 @@ export const ProfilePage = () => {
     hasNext,
   } = useNftBalanceQuery(address, collectionFilters, [], DEFAULT_WALLET_ASSET_QUERY_AMOUNT)
 
+  const ownerCollections = useMemo(
+    () => (isSuccess ? ownerCollectionsData?.pages.map((page) => page.data).flat() : null),
+    [isSuccess, ownerCollectionsData]
+  )
+
   useEffect(() => {
     ownerCollections && setWalletCollections(ownerCollections)
   }, [ownerCollections, setWalletCollections])
@@ -106,7 +126,12 @@ export const ProfilePage = () => {
         <>
           <ProfileHeader>My NFTs</ProfileHeader>
           <Row alignItems="flex-start" position="relative">
-            <FilterSidebar />
+            <FilterSidebar
+              fetchNextPage={fetchNextPage}
+              hasNextPage={hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              walletCollections={walletCollections}
+            />
 
             {(!isMobile || !isFiltersExpanded) && (
               <Column width="full">

src/nft/components/profile/view/ViewMyNftsAsset.tsx

@@ -102,7 +102,7 @@ export const ViewMyNftsAsset = ({
         <Tooltip
           text={
             <Box as="span" className={bodySmall} color="textPrimary">
-              {isSelected ? <Trans>Selected</Trans> : <Trans>Deselected</Trans>}
+              {isSelected ? <Trans>Added to bag</Trans> : <Trans>Removed from bag</Trans>}
             </Box>
           }
           show={showTooltip}

src/nft/css/sprinkles.css.ts

@@ -145,6 +145,7 @@ const zIndices = {
   modal: '1060',
   popover: '1070',
   tooltip: '1080',
+  modalOverTooltip: '1090',
 }
 
 export const vars = createGlobalTheme(':root', {

yarn.lock

@@ -3823,7 +3823,15 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-window@^1.8.2":
+"@types/react-window-infinite-loader@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-window-infinite-loader/-/react-window-infinite-loader-1.0.6.tgz#d7b23b4afaa1e0e2050876b766c3ea19f748f549"
+  integrity sha512-V8g8sBDLVeJJAfEENJS7VXZK+DRJ+jzPNtk8jpj2G+obhf+iqGNUDGwNWCbBhLiD+KpHhf3kWQlKBRi0tAeU4Q==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-window" "*"
+
+"@types/react-window@*", "@types/react-window@^1.8.2":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
   integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
@@ -15093,6 +15101,11 @@ react-virtualized-auto-sizer@^1.0.2:
   resolved "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz"
   integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
 
+react-window-infinite-loader@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/react-window-infinite-loader/-/react-window-infinite-loader-1.0.8.tgz#f88b1444829e732a3f4c5ae861644815329ddd88"
+  integrity sha512-907ZLAiZZfBHuZyiY0V7uiSL4P/rI6UQyCF9wES1cDWTeyNLgGLaxu+BZkcUW3R5tSCQcbCcWBl0jVIpYzrKGQ==
+
 react-window@^1.8.5:
   version "1.8.6"
   resolved "https://registry.npmjs.org/react-window/-/react-window-1.8.6.tgz"