feat: Add Skeleton

pancakeswap · Jul 10, 2023 · 73a006a · 73a006a
1 parent 59734bb
commit 73a006a
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 28 deletions.
diff --git a/apps/web/src/views/TradingReward/components/Leaderboard/RankingCard.tsx b/apps/web/src/views/TradingReward/components/Leaderboard/RankingCard.tsx
@@ -9,6 +9,7 @@ import {
   LaurelRightIcon,
   Text,
   SubMenu,
+  Skeleton,
 } from '@pancakeswap/uikit'
 import styled from 'styled-components'
 import { useTranslation } from '@pancakeswap/localization'
@@ -51,11 +52,11 @@ const RankingCard: React.FC<React.PropsWithChildren<RankingCardProps>> = ({ rank
   const { t } = useTranslation()
   const rankColor = getRankingColor(rank)
   const cakePriceBusd = usePriceCakeUSD()
-  const { profile, isLoading: isProfileLoading } = useProfileForAddress(user.origin)
-  const { domainName, avatar } = useDomainNameForAddress(user.origin, !profile && !isProfileLoading)
+  const { profile, isLoading: isProfileLoading } = useProfileForAddress(user?.origin)
+  const { domainName, avatar } = useDomainNameForAddress(user?.origin, !profile && !isProfileLoading)
 
   const cakeAmount = useMemo(
-    () => new BigNumber(user?.estimateRewardUSD).div(cakePriceBusd).toNumber(),
+    () => new BigNumber(user?.estimateRewardUSD).div(cakePriceBusd).toNumber() ?? 0,
     [cakePriceBusd, user?.estimateRewardUSD],
   )
 
@@ -87,9 +88,13 @@ const RankingCard: React.FC<React.PropsWithChildren<RankingCardProps>> = ({ rank
                     </Box>
                     <RotatedLaurelRightIcon color={rankColor} width="32px" />
                   </Flex>
-                  <Text color="primary" fontWeight="bold" textAlign="center">
-                    {profile?.username || domainName || truncateHash(user.origin)}
-                  </Text>
+                  {!user ? (
+                    <Skeleton width="60px" m="0 auto" />
+                  ) : (
+                    <Text color="primary" fontWeight="bold" textAlign="center">
+                      {profile?.username || domainName || truncateHash(user?.origin)}
+                    </Text>
+                  )}
                 </Flex>
               }
               options={{ placement: 'bottom' }}
@@ -100,21 +105,34 @@ const RankingCard: React.FC<React.PropsWithChildren<RankingCardProps>> = ({ rank
               {t('Total Reward')}
             </Text>
             <Box>
-              <Text textAlign="right" bold color="text" fontSize="20px" lineHeight="110%">
-                {`$${formatNumber(user.estimateRewardUSD)}`}
-              </Text>
-              <Text textAlign="right" color="textSubtle" fontSize="12px">
-                {`~${formatNumber(cakeAmount)} CAKE`}
-              </Text>
+              {!user ? (
+                <>
+                  <Skeleton width="60px" mb="2px" />
+                  <Skeleton width="60px" />
+                </>
+              ) : (
+                <>
+                  <Text textAlign="right" bold color="text" fontSize="20px" lineHeight="110%">
+                    {`$${formatNumber(user?.estimateRewardUSD)}`}
+                  </Text>
+                  <Text textAlign="right" color="textSubtle" fontSize="12px">
+                    {`~${formatNumber(cakeAmount)} CAKE`}
+                  </Text>
+                </>
+              )}
             </Box>
           </Flex>
           <Flex justifyContent="space-between">
             <Text bold color="textSubtle">
               {t('Trading Volume')}
             </Text>
-            <Text textAlign="right" bold color="text" fontSize="20px">
-              {`$${formatNumber(user.volume)}`}
-            </Text>
+            {!user ? (
+              <Skeleton width="100px" />
+            ) : (
+              <Text textAlign="right" bold color="text" fontSize="20px">
+                {`$${formatNumber(user?.volume)}`}
+              </Text>
+            )}
           </Flex>
         </CardBody>
       </Card>

diff --git a/apps/web/src/views/TradingReward/components/Leaderboard/index.tsx b/apps/web/src/views/TradingReward/components/Leaderboard/index.tsx
@@ -144,18 +144,20 @@ const Leaderboard: React.FC<React.PropsWithChildren<LeaderboardProps>> = ({ camp
           </>
         )}
         {campaignLeaderBoardList.campaignStart > 0 && (
-          <>
-            <Container mb="16px">
-              <Grid
-                gridGap={['16px', null, null, null, null, '24px']}
-                gridTemplateColumns={['1fr', null, null, null, null, 'repeat(3, 1fr)']}
-              >
-                {first && <RankingCard rank={1} user={first} />}
-                {second && <RankingCard rank={2} user={second} />}
-                {third && <RankingCard rank={3} user={third} />}
-              </Grid>
-            </Container>
-          </>
+          <Container mb="16px">
+            <Grid
+              gridGap={['16px', null, null, null, null, '24px']}
+              gridTemplateColumns={['1fr', null, null, null, null, 'repeat(3, 1fr)']}
+            >
+              {(topTradersArr?.length > 0 || isLoading) && (
+                <>
+                  <RankingCard rank={1} user={first} />
+                  <RankingCard rank={2} user={second} />
+                  <RankingCard rank={3} user={third} />
+                </>
+              )}
+            </Grid>
+          </Container>
         )}
         <Box maxWidth={1200} m="auto">
           <MyRank campaignId={campaignLeaderBoardList.campaignId} />

diff --git a/apps/web/src/views/TradingReward/hooks/useRankList.tsx b/apps/web/src/views/TradingReward/hooks/useRankList.tsx
@@ -36,14 +36,19 @@ const TOP_RANK_NUMBER = 3
 
 export const useRankList = ({ campaignId, currentPage }: UseRankListProps): RankList => {
   const [isLoading, setIsLoading] = useState(false)
+  const [lastCampaignId, setLastCampaignId] = useState('')
   const [topThreeTraders, setTopThreeTraders] = useState<RankListDetail[]>([])
 
   const { data } = useSWR(
     Number(campaignId) > 0 && currentPage && ['/trader-rank-list', campaignId, currentPage],
     async () => {
       try {
         setIsLoading(true)
-        setTopThreeTraders([])
+        setLastCampaignId(campaignId)
+        if (campaignId !== lastCampaignId) {
+          setTopThreeTraders([])
+        }
+
         const response = await fetch(
           `${TRADING_REWARD_API}/rank_list/campaignId/${campaignId}/type/${RewardType.TOP_TRADERS}/page/${currentPage}/size/${MAX_PER_PAGE}`,
         )