fix: lazy load nft profile (#7361)

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'
 
 import { DEFAULT_WALLET_ASSET_QUERY_AMOUNT } from './ProfilePage'
 
-const SkeletonPageWrapper = styled.div`
-  ${ScreenBreakpointsPaddings};
-  padding-top: 40px;
-  width: 100%;
-
-  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: 16px;
-  }
-`
-
 const SkeletonBodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -86,11 +75,3 @@ export const ProfileBodyLoadingSkeleton = () => {
     </SkeletonBodyWrapper>
   )
 }
-
-export const ProfilePageLoadingSkeleton = () => {
-  return (
-    <SkeletonPageWrapper>
-      <ProfileBodyLoadingSkeleton />
-    </SkeletonPageWrapper>
-  )
-}

src/nft/pages/profile/profile.tsx → src/nft/pages/profile/index.tsx

@@ -7,10 +7,9 @@ import { ButtonPrimary } from 'components/Button'
 import { XXXL_BAG_WIDTH } from 'nft/components/bag/Bag'
 import { ListPage } from 'nft/components/profile/list/ListPage'
 import { ProfilePage } from 'nft/components/profile/view/ProfilePage'
-import { ProfilePageLoadingSkeleton } from 'nft/components/profile/view/ProfilePageLoadingSkeleton'
 import { useBag, useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
 import { ProfilePageStateType } from 'nft/types'
-import { Suspense, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import styled from 'styled-components'
 import { BREAKPOINTS } from 'theme'
 import { ThemedText } from 'theme/components'
@@ -60,7 +59,7 @@ const ConnectWalletButton = styled(ButtonPrimary)`
   border: none;
 `
 
-const ProfileContent = () => {
+export default function Profile() {
   const sellPageState = useProfilePageState((state) => state.state)
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
   const resetSellAssets = useSellAsset((state) => state.reset)
@@ -104,13 +103,3 @@ const ProfileContent = () => {
     </Trace>
   )
 }
-
-const Profile = () => {
-  return (
-    <Suspense fallback={<ProfilePageLoadingSkeleton />}>
-      <ProfileContent />
-    </Suspense>
-  )
-}
-
-export default Profile

src/pages/App.tsx

@@ -32,7 +32,7 @@ import Swap from './Swap'
 const AppChrome = lazy(() => import('./AppChrome'))
 const NftExplore = lazy(() => import('nft/pages/explore'))
 const Collection = lazy(() => import('nft/pages/collection'))
-const Profile = lazy(() => import('nft/pages/profile/profile'))
+const Profile = lazy(() => import('nft/pages/profile'))
 const Asset = lazy(() => import('nft/pages/asset/Asset'))
 const AddLiquidity = lazy(() => import('pages/AddLiquidity'))
 const RedirectDuplicateTokenIds = lazy(() => import('pages/AddLiquidity/redirects'))