Skip to content

I
interface
Commit babfebcc authored by lynn's avatar lynn Committed by GitHub
Browse files
Options

refactor: view my nfts loading optimization (#5318) 

* working

* remove commented code
parent ea02d9e9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 110 deletions
src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx
View file @ babfebcc
import { Box } from 'nft/components/Box'
import { assetList } from 'nft/components/collection/CollectionNfts.css' import { assetList } from 'nft/components/collection/CollectionNfts.css'
import { loadingAsset } from 'nft/css/loading.css'
import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css' import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
...@@ -35,7 +37,6 @@ const AccountDetailsSkeletonWrapper = styled(SkeletonRowWrapper)` ...@@ -35,7 +37,6 @@ const AccountDetailsSkeletonWrapper = styled(SkeletonRowWrapper)`
const ProfileDetailsSkeleton = styled.div` const ProfileDetailsSkeleton = styled.div`
width: 180px; width: 180px;
height: 36px; height: 36px;
background: ${({ theme }) => theme.backgroundModule};
border-radius: 12px; border-radius: 12px;
` `
...@@ -46,39 +47,42 @@ const FilterBarSkeletonWrapper = styled(SkeletonRowWrapper)` ...@@ -46,39 +47,42 @@ const FilterBarSkeletonWrapper = styled(SkeletonRowWrapper)`
const FilterButtonSkeleton = styled.div` const FilterButtonSkeleton = styled.div`
width: 92px; width: 92px;
height: 44px; height: 44px;
background: ${({ theme }) => theme.backgroundModule};
border-radius: 12px; border-radius: 12px;
` `
const SellButtonSkeleton = styled.div` const SellButtonSkeleton = styled.div`
width: 80px; width: 80px;
height: 44px; height: 44px;
background: ${({ theme }) => theme.backgroundModule};
border-radius: 12px; border-radius: 12px;
` `
export const ProfileAssetCardSkeleton = styled.div` export const ProfileAssetCardSkeleton = styled.div`
width: 100%; width: 100%;
height: 330px; height: 330px;
background: ${({ theme }) => theme.backgroundModule};
border-radius: 20px; 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 = () => { export const ProfileBodyLoadingSkeleton = () => {
return ( return (
<SkeletonBodyWrapper> <SkeletonBodyWrapper>
<AccountDetailsSkeletonWrapper> <AccountDetailsSkeletonWrapper>
<ProfileDetailsSkeleton /> <ProfileDetailsSkeleton className={loadingAsset} />
</AccountDetailsSkeletonWrapper> </AccountDetailsSkeletonWrapper>
<FilterBarSkeletonWrapper> <FilterBarSkeletonWrapper>
<FilterButtonSkeleton /> <FilterButtonSkeleton className={loadingAsset} />
<SellButtonSkeleton /> <SellButtonSkeleton className={loadingAsset} />
</FilterBarSkeletonWrapper> </FilterBarSkeletonWrapper>
<div className={assetList}> <ProfileAssetCardDisplaySectionSkeleton />
{Array.from(Array(DEFAULT_WALLET_ASSET_QUERY_AMOUNT), (_, index) => (
<ProfileAssetCardSkeleton key={index} />
))}
</div>
</SkeletonBodyWrapper> </SkeletonBodyWrapper>
) )
} }
......
src/nft/pages/profile/profile.tsx
View file @ babfebcc
import { Trace } from '@uniswap/analytics' import { Trace } from '@uniswap/analytics'
import { PageName } from '@uniswap/analytics-events' import { PageName } from '@uniswap/analytics-events'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { useLoadNftBalanceQuery } from 'graphql/data/nft/NftBalance'
import { Box } from 'nft/components/Box' import { Box } from 'nft/components/Box'
import { Center, Column } from 'nft/components/Flex' import { Center, Column } from 'nft/components/Flex'
import { ListPage } from 'nft/components/profile/list/ListPage' import { ListPage } from 'nft/components/profile/list/ListPage'
...@@ -50,7 +49,7 @@ const ProfileContent = () => { ...@@ -50,7 +49,7 @@ const ProfileContent = () => {
{/* <Head> TODO: figure out metadata tagging {/* <Head> TODO: figure out metadata tagging
<title>Genie | Sell</title> <title>Genie | Sell</title>
</Head> */} </Head> */}
{account != null ? ( {!!account ? (
<Box style={{ width: `calc(100% - ${cartExpanded ? SHOPPING_BAG_WIDTH : 0}px)` }}> <Box style={{ width: `calc(100% - ${cartExpanded ? SHOPPING_BAG_WIDTH : 0}px)` }}>
{sellPageState === ProfilePageStateType.VIEWING ? <ProfilePage /> : <ListPage />} {sellPageState === ProfilePageStateType.VIEWING ? <ProfilePage /> : <ListPage />}
</Box> </Box>
...@@ -74,9 +73,6 @@ const ProfileContent = () => { ...@@ -74,9 +73,6 @@ const ProfileContent = () => {
} }
const Profile = () => { const Profile = () => {
const { account } = useWeb3React()
useLoadNftBalanceQuery(account, [])
return ( return (
<Suspense fallback={<ProfilePageLoadingSkeleton />}> <Suspense fallback={<ProfilePageLoadingSkeleton />}>
<ProfileContent /> <ProfileContent />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment