Token dashboard: make sure all cards have loading state

oasisprotocol · Jul 7, 2023 · 08fa93b · 08fa93b
1 parent 70b24fb
commit 08fa93b
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 69 deletions.
diff --git a/.changelog/691.feature.md b/.changelog/691.feature.md
@@ -0,0 +1 @@
+Token dashboard: make sure all cards have loading state
diff --git a/src/app/components/Tokens/TokenTransfers.tsx b/src/app/components/Tokens/TokenTransfers.tsx
@@ -204,7 +204,7 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
   return (
     <Table
       columns={tableColumns}
-      rows={tableRows}
+      rows={isLoading ? undefined : tableRows}
       rowsNumber={limit}
       name={t('transactions.latest')}
       isLoading={isLoading}

diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
@@ -34,7 +34,7 @@ export const TokenDetailsCard: FC = () => {
     <Card>
       <CardContent>
         {isLoading && <TextSkeleton numberOfRows={7} />}
-        {account && token && (
+        {!isLoading && account && token && (
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
             <dt>{t('common.token')}</dt>
             <dd>{token.name}</dd>

diff --git a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx
@@ -7,21 +7,24 @@ import { COLORS } from '../../../styles/theme/colors'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { useTokenInfo } from './hook'
 import { useLoaderData } from 'react-router-dom'
+import Skeleton from '@mui/material/Skeleton'
 
 export const TokenHoldersCountCard: FC = () => {
   const { t } = useTranslation()
   const scope = useRequiredScopeParam()
 
   const address = useLoaderData() as string
 
-  const { token, isFetched } = useTokenInfo(scope, address)
+  const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   const title = t('tokens.holders')
   return (
     <SnapshotCard title={title} withConstantHeight>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isFetched && (
-          <>
+        {isLoading ? (
+          <Skeleton variant="text" sx={{ width: '50%' }} />
+        ) : (
+          isFetched && (
             <Typography
               component="span"
               sx={{
@@ -32,7 +35,7 @@ export const TokenHoldersCountCard: FC = () => {
             >
               {t('tokens.holdersValue', { value: token?.num_holders })}
             </Typography>
-          </>
+          )
         )}
       </Box>
     </SnapshotCard>

diff --git a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx
@@ -7,34 +7,42 @@ import { COLORS } from '../../../styles/theme/colors'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { useTokenInfo } from './hook'
 import { useLoaderData } from 'react-router-dom'
+import Skeleton from '@mui/material/Skeleton'
 
 export const TokenSupplyCard: FC = () => {
   const { t } = useTranslation()
   const scope = useRequiredScopeParam()
 
   const address = useLoaderData() as string
 
-  const { token, isFetched } = useTokenInfo(scope, address)
+  const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
-  const title = t('tokens.totalSupply')
   const supplyString = token?.total_supply
 
   return (
-    <SnapshotCard title={title} label={token?.symbol}>
+    <SnapshotCard
+      title={t('tokens.totalSupply')}
+      label={isLoading ? <Skeleton variant="text" sx={{ width: '4em' }} /> : token?.symbol}
+    >
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isFetched && (
-          <>
+        {isLoading ? (
+          <Skeleton variant="text" sx={{ width: '50%' }} />
+        ) : (
+          isFetched &&
+          token && (
             <Typography
               component="span"
               sx={{
                 fontSize: '48px',
                 fontWeight: 700,
                 color: COLORS.brandDark,
+                textAlign: 'center',
+                width: '100%',
               }}
             >
               {!supplyString ? t('common.missing') : t('tokens.totalSupplyValue', { value: supplyString })}
             </Typography>
-          </>
+          )
         )}
       </Box>
     </SnapshotCard>

diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx
@@ -11,72 +11,76 @@ import { DelayedContractVerificationIcon } from '../../components/ContractVerifi
 import { AccountLink } from '../../components/Account/AccountLink'
 import Box from '@mui/material/Box'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
+import { useTranslation } from 'react-i18next'
 
 const TitleSkeleton: FC = () => <Skeleton variant="text" sx={{ display: 'inline-block', width: '100%' }} />
 
 export const TokenTitleCard: FC = () => {
+  const { t } = useTranslation()
   const scope = useRequiredScopeParam()
   const address = useLoaderData() as string
 
   const { isLoading, token } = useTokenInfo(scope, address)
 
-  const title = isLoading ? <TitleSkeleton /> : token?.name
-  const subTitle = isLoading ? null : ` (${token?.symbol})` || null
-
   return (
     <Card>
       <CardContent>
-        <Box
-          sx={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
+        {isLoading ? (
+          <TitleSkeleton />
+        ) : (
           <Box
             sx={{
               display: 'flex',
+              flexWrap: 'wrap',
+              justifyContent: 'space-between',
+              alignItems: 'center',
             }}
           >
-            <Typography
-              variant="h2"
-              sx={{
-                fontWeight: 700,
-              }}
-            >
-              {title}
-            </Typography>
-            &nbsp;
-            <Typography
-              variant="h2"
-              sx={{
-                color: COLORS.grayMedium,
-                fontWeight: 700,
-              }}
-            >
-              {subTitle}
-            </Typography>
-          </Box>
-
-          {token && (
             <Box
               sx={{
                 display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
+                width: '50%',
               }}
             >
-              <DelayedContractVerificationIcon
-                scope={token}
-                contractOasisAddress={token.contract_addr}
-                noLink
-              />
-              <AccountLink scope={token} address={token.eth_contract_addr || token.contract_addr} />
-              <CopyToClipboard value={token.eth_contract_addr || token.contract_addr} />
+              <Typography
+                variant="h2"
+                sx={{
+                  fontWeight: 700,
+                }}
+              >
+                {token?.name ?? t('common.missing')}
+              </Typography>
+              &nbsp;
+              <Typography
+                variant="h2"
+                sx={{
+                  color: COLORS.grayMedium,
+                  fontWeight: 700,
+                }}
+              >
+                {token?.symbol ?? t('common.missing')}
+              </Typography>
             </Box>
-          )}
-        </Box>
+
+            {token && (
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <DelayedContractVerificationIcon
+                  scope={token}
+                  contractOasisAddress={token.contract_addr}
+                  noLink
+                />
+                <AccountLink scope={token} address={token.eth_contract_addr || token.contract_addr} />
+                <CopyToClipboard value={token.eth_contract_addr || token.contract_addr} />
+              </Box>
+            )}
+          </Box>
+        )}
       </CardContent>
     </Card>
   )

diff --git a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx
@@ -7,21 +7,28 @@ import { COLORS } from '../../../styles/theme/colors'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { useLoaderData } from 'react-router-dom'
 import { useAccount } from '../AccountDetailsPage/hook'
+import Skeleton from '@mui/material/Skeleton'
+import { useTokenInfo } from './hook'
 
 export const TokenTotalTransactionsCard: FC = () => {
   const { t } = useTranslation()
   const scope = useRequiredScopeParam()
 
   const address = useLoaderData() as string
 
-  const { isFetched, account } = useAccount(scope, address)
+  const { isLoading: isAccountLoading, isFetched, account } = useAccount(scope, address)
+  const { isLoading: isTokenLoading } = useTokenInfo(scope, address)
   const value = account?.stats.num_txns
 
+  const isLoading = isAccountLoading || isTokenLoading
+
   return (
     <SnapshotCard title={t('totalTransactions.header')} withConstantHeight>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isFetched && (
-          <>
+        {isLoading ? (
+          <Skeleton variant="text" sx={{ width: '50%' }} />
+        ) : (
+          isFetched && (
             <Typography
               component="span"
               sx={{
@@ -32,7 +39,7 @@ export const TokenTotalTransactionsCard: FC = () => {
             >
               {t('totalTransactions.value', { value })}
             </Typography>
-          </>
+          )
         )}
       </Box>
     </SnapshotCard>

diff --git a/src/app/pages/TokenDashboardPage/TokenTransfersCard.tsx b/src/app/pages/TokenDashboardPage/TokenTransfersCard.tsx
@@ -10,7 +10,7 @@ import { useLoaderData } from 'react-router-dom'
 import { TokenTransfers } from '../../components/Tokens/TokenTransfers'
 import { CardEmptyState } from '../AccountDetailsPage/CardEmptyState'
 import { useAccount } from '../AccountDetailsPage/hook'
-import { useTokenTransfers } from './hook'
+import { useTokenInfo, useTokenTransfers } from './hook'
 
 export const tokenTransfersContainerId = 'transfers'
 
@@ -19,12 +19,20 @@ export const TokenTransfersCard: FC = () => {
   const scope = useRequiredScopeParam()
   const address = useLoaderData() as string
 
-  const { isLoading, isFetched, transfers, pagination, totalCount, isTotalCountClipped } = useTokenTransfers(
-    scope,
-    address,
-  )
+  const {
+    isLoading: areTransfersLoading,
+    isFetched,
+    transfers,
+    pagination,
+    totalCount,
+    isTotalCountClipped,
+  } = useTokenTransfers(scope, address)
+
+  const { isLoading: isTokenLoading } = useTokenInfo(scope, address)
+
+  const { isLoading: isAccountLoading, account } = useAccount(scope, address)
 
-  const { account } = useAccount(scope, address)
+  const isLoading = isTokenLoading || isAccountLoading || areTransfersLoading
 
   return (
     <Card>

diff --git a/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx b/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx
@@ -10,6 +10,7 @@ import { useLoaderData } from 'react-router-dom'
 import { EvmTokenType } from '../../../oasis-nexus/api'
 import { TFunction } from 'i18next'
 import { exhaustedTypeWarning } from '../../../types/errors'
+import Skeleton from '@mui/material/Skeleton'
 
 export const getTokenTypeName = (t: TFunction, type: EvmTokenType): string => {
   switch (type) {
@@ -29,13 +30,15 @@ export const TokenTypeCard: FC = () => {
 
   const address = useLoaderData() as string
 
-  const { token, isFetched } = useTokenInfo(scope, address)
+  const { isLoading, token, isFetched } = useTokenInfo(scope, address)
 
   return (
     <SnapshotCard title={t('tokens.type')} withConstantHeight>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        {isFetched && (
-          <>
+        {isLoading ? (
+          <Skeleton variant="text" sx={{ width: '50%' }} />
+        ) : (
+          isFetched && (
             <Typography
               component="span"
               sx={{
@@ -46,7 +49,7 @@ export const TokenTypeCard: FC = () => {
             >
               {token?.type ? getTokenTypeName(t, token.type) : '-'}
             </Typography>
-          </>
+          )
         )}
       </Box>
     </SnapshotCard>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Token dashboard: make sure all cards have loading state