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 { 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
View file @ babfebcc
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 />
......
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