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,19 +100,8 @@ 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">
@@ -132,16 +111,110 @@ export const ProfilePage = () => {
             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' }}
+          position="fixed"
+          left="16"
+          height="56"
+          borderRadius="12"
+          paddingX="16"
+          paddingY="12"
+          background="backgroundModule"
+          borderStyle="solid"
+          borderColor="backgroundOutline"
+          borderWidth="1px"
+          style={{ bottom: '68px', width: 'calc(100% - 32px)', lineHeight: '24px' }}
+          className={subhead}
+        >
+          {sellAssets.length} NFT{sellAssets.length === 1 ? '' : 's'}
+          <Box
+            fontWeight="semibold"
+            fontSize="14"
+            cursor="pointer"
+            color="textSecondary"
+            marginRight="20"
+            marginLeft="auto"
+            onClick={resetSellAssets}
+            lineHeight="16"
+          >
+            Clear
+          </Box>
+          <Box
+            color="white"
+            marginRight="0"
+            fontWeight="medium"
+            fontSize="14"
+            cursor="pointer"
+            backgroundColor="accentAction"
+            onClick={toggleBag}
+            lineHeight="16"
+            borderRadius="12"
+            paddingY="8"
+            paddingX="28"
+          >
+            Sell
+          </Box>
+        </Row>
+      )}
+    </ProfilePageColumn>
+  )
+}
+
+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)`
+              (x) => `translate(${Number(x) - (!isMobile && isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING)}px)`
             ),
           }}
           paddingY="20"
@@ -188,58 +261,8 @@ export const ProfilePage = () => {
             </div>
           </InfiniteScroll>
         </AnimatedBox>
-              </Column>
-            )}
-          </Row>
-        </>
-      )}
-      {sellAssets.length > 0 && (
-        <Row
-          display={{ sm: 'flex', md: 'none' }}
-          position="fixed"
-          left="16"
-          height="56"
-          borderRadius="12"
-          paddingX="16"
-          paddingY="12"
-          background="backgroundModule"
-          borderStyle="solid"
-          borderColor="backgroundOutline"
-          borderWidth="1px"
-          style={{ bottom: '68px', width: 'calc(100% - 32px)', lineHeight: '24px' }}
-          className={subhead}
-        >
-          {sellAssets.length} NFT{sellAssets.length === 1 ? '' : 's'}
-          <Box
-            fontWeight="semibold"
-            fontSize="14"
-            cursor="pointer"
-            color="textSecondary"
-            marginRight="20"
-            marginLeft="auto"
-            onClick={resetSellAssets}
-            lineHeight="16"
-          >
-            Clear
-          </Box>
-          <Box
-            color="white"
-            marginRight="0"
-            fontWeight="medium"
-            fontSize="14"
-            cursor="pointer"
-            backgroundColor="accentAction"
-            onClick={toggleBag}
-            lineHeight="16"
-            borderRadius="12"
-            paddingY="8"
-            paddingX="28"
-          >
-            Sell
-          </Box>
-        </Row>
       )}
-    </ProfilePageColumn>
+    </Column>
   )
 }
 

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 />