refactor: view my nfts loading optimization (#5318)

* working

* remove commented code

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

@@ -12,7 +12,7 @@ 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, useMemo, useState } from 'react'
+import { Dispatch, SetStateAction, Suspense, useEffect, useMemo, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery } from 'react-query'
 import { easings, useSpring } from 'react-spring'
@@ -21,6 +21,7 @@ import shallow from 'zustand/shallow'
 
 import { EmptyWalletContent } from './EmptyWalletContent'
 import * as styles from './ProfilePage.css'
+import { ProfileBodyLoadingSkeleton } from './ProfilePageLoadingSkeleton'
 import { ViewMyNftsAsset } from './ViewMyNftsAsset'
 
 const ProfilePageColumn = styled(Column)`
@@ -49,9 +50,6 @@ const PADDING = 16
 
 export const ProfilePage = () => {
   const { address } = useWalletBalance()
-  const collectionFilters = useWalletCollections((state) => state.collectionFilters)
-  const setCollectionFilters = useWalletCollections((state) => state.setCollectionFilters)
-  const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
   const walletCollections = useWalletCollections((state) => state.walletCollections)
   const setWalletCollections = useWalletCollections((state) => state.setWalletCollections)
   const { resetSellAssets } = useSellAsset(
@@ -61,11 +59,9 @@ export const ProfilePage = () => {
     shallow
   )
   const sellAssets = useSellAsset((state) => state.sellAssets)
-  const isBagExpanded = useBag((state) => state.bagExpanded)
   const toggleBag = useBag((state) => state.toggleBag)
   const [isFiltersExpanded, setFiltersExpanded] = useFiltersExpanded()
   const isMobile = useIsMobile()
-  const [currentTokenPlayingMedia, setCurrentTokenPlayingMedia] = useState<string | undefined>()
 
   const getOwnerCollections = async ({ pageParam = 0 }) => {
     const res = await OSCollectionsFetcher({
@@ -95,12 +91,6 @@ export const ProfilePage = () => {
     refetchOnMount: false,
   })
 
-  const {
-    walletAssets: ownerAssets,
-    loadNext,
-    hasNext,
-  } = useNftBalanceQuery(address, collectionFilters, [], DEFAULT_WALLET_ASSET_QUERY_AMOUNT)
-
   const ownerCollections = useMemo(
     () => (isSuccess ? ownerCollectionsData?.pages.map((page) => page.data).flat() : null),
     [isSuccess, ownerCollectionsData]
@@ -110,89 +100,28 @@ export const ProfilePage = () => {
     ownerCollections && setWalletCollections(ownerCollections)
   }, [ownerCollections, setWalletCollections])
 
-  const { gridX } = useSpring({
-    gridX: isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING,
-    config: {
-      duration: 250,
-      easing: easings.easeOutSine,
-    },
-  })
-
   return (
     <ProfilePageColumn width="full" paddingTop={{ sm: `${PADDING}`, md: '40' }}>
-      {ownerAssets?.length === 0 ? (
-        <EmptyWalletContent />
-      ) : (
-        <>
-          <ProfileHeader>My NFTs</ProfileHeader>
-          <Row alignItems="flex-start" position="relative">
-            <FilterSidebar
-              fetchNextPage={fetchNextPage}
-              hasNextPage={hasNextPage}
-              isFetchingNextPage={isFetchingNextPage}
-              walletCollections={walletCollections}
-            />
-
-            {(!isMobile || !isFiltersExpanded) && (
-              <Column width="full">
-                <AnimatedBox
-                  flexShrink="0"
-                  position={isMobile && isBagExpanded ? 'fixed' : 'static'}
-                  style={{
-                    transform: gridX.to(
-                      (x) =>
-                        `translate(${Number(x) - (!isMobile && isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING)}px)`
-                    ),
-                  }}
-                  paddingY="20"
-                >
-                  <Row gap="8" flexWrap="nowrap" justifyContent="space-between">
-                    <FilterButton
-                      isMobile={isMobile}
-                      isFiltersExpanded={isFiltersExpanded}
-                      onClick={() => setFiltersExpanded(!isFiltersExpanded)}
-                    />
-                  </Row>
-                  <Row>
-                    <CollectionFiltersRow
-                      collections={walletCollections}
-                      collectionFilters={collectionFilters}
-                      setCollectionFilters={setCollectionFilters}
-                      clearCollectionFilters={clearCollectionFilters}
-                    />
-                  </Row>
-                  <InfiniteScroll
-                    next={() => loadNext(DEFAULT_WALLET_ASSET_QUERY_AMOUNT)}
-                    hasMore={hasNext}
-                    loader={
-                      <Center>
-                        <LoadingSparkle />
-                      </Center>
-                    }
-                    dataLength={ownerAssets?.length ?? 0}
-                    style={{ overflow: 'unset' }}
-                  >
-                    <div className={assetList}>
-                      {ownerAssets?.length
-                        ? ownerAssets.map((asset, index) => (
-                            <div key={index}>
-                              <ViewMyNftsAsset
-                                asset={asset}
-                                mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
-                                setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
-                                hideDetails={sellAssets.length > 0}
-                              />
-                            </div>
-                          ))
-                        : null}
-                    </div>
-                  </InfiniteScroll>
-                </AnimatedBox>
-              </Column>
-            )}
-          </Row>
-        </>
-      )}
+      <>
+        <ProfileHeader>My NFTs</ProfileHeader>
+        <Row alignItems="flex-start" position="relative">
+          <FilterSidebar
+            fetchNextPage={fetchNextPage}
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            walletCollections={walletCollections}
+          />
+          {(!isMobile || !isFiltersExpanded) && (
+            <Suspense fallback={<ProfileBodyLoadingSkeleton />}>
+              <ProfilePageNfts
+                walletCollections={walletCollections}
+                isFiltersExpanded={isFiltersExpanded}
+                setFiltersExpanded={setFiltersExpanded}
+              />
+            </Suspense>
+          )}
+        </Row>
+      </>
       {sellAssets.length > 0 && (
         <Row
           display={{ sm: 'flex', md: 'none' }}
@@ -243,6 +172,100 @@ export const ProfilePage = () => {
   )
 }
 
+const ProfilePageNfts = ({
+  walletCollections,
+  isFiltersExpanded,
+  setFiltersExpanded,
+}: {
+  walletCollections: WalletCollection[]
+  isFiltersExpanded: boolean
+  setFiltersExpanded: (filtersExpanded: boolean) => void
+}) => {
+  const { address } = useWalletBalance()
+  const setCollectionFilters = useWalletCollections((state) => state.setCollectionFilters)
+  const collectionFilters = useWalletCollections((state) => state.collectionFilters)
+  const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
+  const isBagExpanded = useBag((state) => state.bagExpanded)
+  const [currentTokenPlayingMedia, setCurrentTokenPlayingMedia] = useState<string | undefined>()
+  const isMobile = useIsMobile()
+  const sellAssets = useSellAsset((state) => state.sellAssets)
+
+  const {
+    walletAssets: ownerAssets,
+    loadNext,
+    hasNext,
+  } = useNftBalanceQuery(address, collectionFilters, [], DEFAULT_WALLET_ASSET_QUERY_AMOUNT)
+
+  const { gridX } = useSpring({
+    gridX: isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING,
+    config: {
+      duration: 250,
+      easing: easings.easeOutSine,
+    },
+  })
+
+  return (
+    <Column width="full">
+      {ownerAssets?.length === 0 ? (
+        <EmptyWalletContent />
+      ) : (
+        <AnimatedBox
+          flexShrink="0"
+          position={isMobile && isBagExpanded ? 'fixed' : 'static'}
+          style={{
+            transform: gridX.to(
+              (x) => `translate(${Number(x) - (!isMobile && isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING)}px)`
+            ),
+          }}
+          paddingY="20"
+        >
+          <Row gap="8" flexWrap="nowrap" justifyContent="space-between">
+            <FilterButton
+              isMobile={isMobile}
+              isFiltersExpanded={isFiltersExpanded}
+              onClick={() => setFiltersExpanded(!isFiltersExpanded)}
+            />
+          </Row>
+          <Row>
+            <CollectionFiltersRow
+              collections={walletCollections}
+              collectionFilters={collectionFilters}
+              setCollectionFilters={setCollectionFilters}
+              clearCollectionFilters={clearCollectionFilters}
+            />
+          </Row>
+          <InfiniteScroll
+            next={() => loadNext(DEFAULT_WALLET_ASSET_QUERY_AMOUNT)}
+            hasMore={hasNext}
+            loader={
+              <Center>
+                <LoadingSparkle />
+              </Center>
+            }
+            dataLength={ownerAssets?.length ?? 0}
+            style={{ overflow: 'unset' }}
+          >
+            <div className={assetList}>
+              {ownerAssets?.length
+                ? ownerAssets.map((asset, index) => (
+                    <div key={index}>
+                      <ViewMyNftsAsset
+                        asset={asset}
+                        mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
+                        setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
+                        hideDetails={sellAssets.length > 0}
+                      />
+                    </div>
+                  ))
+                : null}
+            </div>
+          </InfiniteScroll>
+        </AnimatedBox>
+      )}
+    </Column>
+  )
+}
+
 const CollectionFiltersRow = ({
   collections,
   collectionFilters,

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

+import { Box } from 'nft/components/Box'
 import { assetList } from 'nft/components/collection/CollectionNfts.css'
+import { loadingAsset } from 'nft/css/loading.css'
 import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css'
 import styled from 'styled-components/macro'
 
@@ -35,7 +37,6 @@ const AccountDetailsSkeletonWrapper = styled(SkeletonRowWrapper)`
 const ProfileDetailsSkeleton = styled.div`
   width: 180px;
   height: 36px;
-  background: ${({ theme }) => theme.backgroundModule};
   border-radius: 12px;
 `
 
@@ -46,39 +47,42 @@ const FilterBarSkeletonWrapper = styled(SkeletonRowWrapper)`
 const FilterButtonSkeleton = styled.div`
   width: 92px;
   height: 44px;
-  background: ${({ theme }) => theme.backgroundModule};
   border-radius: 12px;
 `
 
 const SellButtonSkeleton = styled.div`
   width: 80px;
   height: 44px;
-  background: ${({ theme }) => theme.backgroundModule};
   border-radius: 12px;
 `
 
 export const ProfileAssetCardSkeleton = styled.div`
   width: 100%;
   height: 330px;
-  background: ${({ theme }) => theme.backgroundModule};
   border-radius: 20px;
 `
 
+export const ProfileAssetCardDisplaySectionSkeleton = () => {
+  return (
+    <Box width="full" className={assetList}>
+      {Array.from(Array(DEFAULT_WALLET_ASSET_QUERY_AMOUNT), (_, index) => (
+        <ProfileAssetCardSkeleton key={index} className={loadingAsset} />
+      ))}
+    </Box>
+  )
+}
+
 export const ProfileBodyLoadingSkeleton = () => {
   return (
     <SkeletonBodyWrapper>
       <AccountDetailsSkeletonWrapper>
-        <ProfileDetailsSkeleton />
+        <ProfileDetailsSkeleton className={loadingAsset} />
       </AccountDetailsSkeletonWrapper>
       <FilterBarSkeletonWrapper>
-        <FilterButtonSkeleton />
-        <SellButtonSkeleton />
+        <FilterButtonSkeleton className={loadingAsset} />
+        <SellButtonSkeleton className={loadingAsset} />
       </FilterBarSkeletonWrapper>
-      <div className={assetList}>
-        {Array.from(Array(DEFAULT_WALLET_ASSET_QUERY_AMOUNT), (_, index) => (
-          <ProfileAssetCardSkeleton key={index} />
-        ))}
-      </div>
+      <ProfileAssetCardDisplaySectionSkeleton />
     </SkeletonBodyWrapper>
   )
 }

src/nft/pages/profile/profile.tsx

 import { Trace } from '@uniswap/analytics'
 import { PageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
-import { useLoadNftBalanceQuery } from 'graphql/data/nft/NftBalance'
 import { Box } from 'nft/components/Box'
 import { Center, Column } from 'nft/components/Flex'
 import { ListPage } from 'nft/components/profile/list/ListPage'
@@ -50,7 +49,7 @@ const ProfileContent = () => {
         {/* <Head> TODO: figure out metadata tagging
           <title>Genie | Sell</title>
         </Head> */}
-        {account != null ? (
+        {!!account ? (
           <Box style={{ width: `calc(100% - ${cartExpanded ? SHOPPING_BAG_WIDTH : 0}px)` }}>
             {sellPageState === ProfilePageStateType.VIEWING ? <ProfilePage /> : <ListPage />}
           </Box>
@@ -74,9 +73,6 @@ const ProfileContent = () => {
 }
 
 const Profile = () => {
-  const { account } = useWeb3React()
-  useLoadNftBalanceQuery(account, [])
-
   return (
     <Suspense fallback={<ProfilePageLoadingSkeleton />}>
       <ProfileContent />