fix: hide collection search for > 300 collections due to lack of search param...

fix: hide collection search for > 300 collections due to lack of search param input for OS api (#5383)

* init

* fix

* respond to charlie

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

@@ -10,7 +10,17 @@ 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 { CSSProperties, Dispatch, FormEvent, SetStateAction, useCallback, useEffect, useReducer, useState } from 'react'
+import {
+  CSSProperties,
+  Dispatch,
+  FormEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from 'react'
 import { easings, useSpring } from 'react-spring'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList, ListOnItemsRenderedProps } from 'react-window'
@@ -18,6 +28,7 @@ import InfiniteLoader from 'react-window-infinite-loader'
 import styled from 'styled-components/macro'
 import { TRANSITION_DURATIONS } from 'theme/styles'
 
+import { WALLET_COLLECTIONS_PAGINATION_LIMIT } from './ProfilePage'
 import * as styles from './ProfilePage.css'
 
 const COLLECTION_ROW_HEIGHT = 44
@@ -81,6 +92,12 @@ export const FilterSidebar = ({
       easing: easings.easeOutSine,
     },
   })
+
+  const hideSearch = useMemo(
+    () => (walletCollections && walletCollections?.length >= WALLET_COLLECTIONS_PAGINATION_LIMIT) || isFetchingNextPage,
+    [walletCollections, isFetchingNextPage]
+  )
+
   return (
     // @ts-ignore
     <AnimatedBox
@@ -120,6 +137,7 @@ export const FilterSidebar = ({
           fetchNextPage={fetchNextPage}
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}
+          hideSearch={hideSearch}
         />
       </Box>
     </AnimatedBox>
@@ -133,6 +151,7 @@ const CollectionSelect = ({
   fetchNextPage,
   hasNextPage,
   isFetchingNextPage,
+  hideSearch,
 }: {
   collections: WalletCollection[]
   collectionFilters: Array<string>
@@ -140,6 +159,7 @@ const CollectionSelect = ({
   fetchNextPage: () => void
   hasNextPage?: boolean
   isFetchingNextPage: boolean
+  hideSearch: boolean
 }) => {
   const [collectionSearchText, setCollectionSearchText] = useState('')
   const [displayCollections, setDisplayCollections] = useState(collections)
@@ -200,10 +220,12 @@ const CollectionSelect = ({
       </Box>
       <Box paddingBottom="12" borderRadius="8">
         <Column as="ul" paddingLeft="0" gap="10" style={{ maxHeight: '80vh' }}>
-          <CollectionFilterSearch
-            collectionSearchText={collectionSearchText}
-            setCollectionSearchText={setCollectionSearchText}
-          />
+          {!hideSearch && (
+            <CollectionFilterSearch
+              collectionSearchText={collectionSearchText}
+              setCollectionSearchText={setCollectionSearchText}
+            />
+          )}
           <ItemsContainer>
             <AutoSizer disableWidth>
               {({ height }) => (

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

@@ -51,7 +51,7 @@ const ProfileHeader = styled.div`
 `
 
 export const DEFAULT_WALLET_ASSET_QUERY_AMOUNT = 25
-const WALLET_COLLECTIONS_PAGINATION_LIMIT = 300
+export const WALLET_COLLECTIONS_PAGINATION_LIMIT = 300
 const FILTER_SIDEBAR_WIDTH = 300
 const PADDING = 16