🚸 dashboard: improve loading states

exactly · Aug 17, 2023 · 279166c · 279166c · vercel · Aug 17, 2023
1 parent 2a3d7d0
commit 279166c
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 189 deletions.
diff --git a/components/newDashboard/DashboardSummary/DashboardHeader/BorrowLimit/index.tsx b/components/newDashboard/DashboardSummary/DashboardHeader/BorrowLimit/index.tsx
@@ -11,7 +11,7 @@ import { WEI_PER_ETHER } from 'utils/const';
 const BorrowLimit = () => {
   const { t } = useTranslation();
   const healthFactor = useHealthFactor();
-  const { accountData } = useAccountData();
+  const { accountData, isFetching } = useAccountData();
 
   const maximumBorrow = useMemo((): string => {
     if (!accountData || !healthFactor) return '';
@@ -58,12 +58,12 @@ const BorrowLimit = () => {
         <BorrowLimitIcon sx={{ fontSize: 16, fill: ({ palette }) => palette.grey[900] }} />
         <Typography variant="dashboardTitle">{t('Borrow Limit')}</Typography>
       </Box>
-      {maximumBorrow ? (
+      {!isFetching && maximumBorrow ? (
         <Typography fontSize={28} fontFamily="IBM Plex Mono">
           ${maximumBorrow}
         </Typography>
       ) : (
-        <Skeleton width={64} height={32} />
+        <Skeleton width={100} height={42} />
       )}
     </Box>
   );

diff --git a/components/newDashboard/DashboardSummary/DashboardHeader/HealthFactor/index.tsx b/components/newDashboard/DashboardSummary/DashboardHeader/HealthFactor/index.tsx
@@ -4,10 +4,12 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import { useTranslation } from 'react-i18next';
 import useHealthFactor from 'hooks/useHealthFactor';
 import parseHealthFactor from 'utils/parseHealthFactor';
+import useAccountData from 'hooks/useAccountData';
 
 const HealthFactor = () => {
   const { t } = useTranslation();
   const { palette } = useTheme();
+  const { isFetching } = useAccountData();
   const hf = useHealthFactor();
   const healthFactor = useMemo(() => (hf ? parseHealthFactor(hf.debt, hf.collateral) : undefined), [hf]);
 
@@ -37,8 +39,8 @@ const HealthFactor = () => {
           {t('Health Factor')}
         </Typography>
       </Box>
-      {!healthFactor ? (
-        <Skeleton width={64} height={32} />
+      {isFetching || !healthFactor ? (
+        <Skeleton width={100} height={42} />
       ) : (
         <Typography fontSize={28} fontFamily="IBM Plex Mono" color={healthFactorColor.color}>
           {healthFactor}

diff --git a/components/newDashboard/DashboardSummary/DashboardHeader/NetEarnings/index.tsx b/components/newDashboard/DashboardSummary/DashboardHeader/NetEarnings/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Divider, Typography } from '@mui/material';
+import { Box, Divider, Skeleton, Typography } from '@mui/material';
 import PaidRoundedIcon from '@mui/icons-material/PaidRounded';
 import { useTranslation } from 'react-i18next';
 import useNetAPR from 'hooks/useNetAPR';
@@ -30,16 +30,24 @@ const NetEarnings = () => {
           <Typography variant="dashboardSubtitleNumber" color="grey.700">
             {t('Net APR')}
           </Typography>
-          <Typography fontSize={28} fontWeight={700}>
-            {toPercentage(Number(netAPR) / 1e18)}
-          </Typography>
+          {netAPR !== undefined ? (
+            <Typography fontSize={28} fontWeight={700}>
+              {toPercentage(Number(netAPR) / 1e18)}
+            </Typography>
+          ) : (
+            <Skeleton width={100} height={42} />
+          )}
         </Box>
         <Divider flexItem />
         <Box display="flex" justifyContent="space-between" alignItems="center" gap={1}>
           <Typography variant="dashboardSubtitleNumber" color="grey.700">
             {t('Net Position')}
           </Typography>
-          <Typography fontSize={28}>${formatNumber(Number(netPosition) / 1e18)}</Typography>
+          {netPosition !== undefined ? (
+            <Typography fontSize={28}>${formatNumber(Number(netPosition) / 1e18)}</Typography>
+          ) : (
+            <Skeleton width={100} height={42} />
+          )}
         </Box>
       </Box>
     </Box>

diff --git a/components/newDashboard/DashboardSummary/DashboardHeader/UserRewards/index.tsx b/components/newDashboard/DashboardSummary/DashboardHeader/UserRewards/index.tsx
@@ -10,6 +10,7 @@ import { WEI_PER_ETHER } from 'utils/const';
 import { LoadingButton } from '@mui/lab';
 import { useWeb3 } from 'hooks/useWeb3';
 import { useModal } from 'contexts/ModalContext';
+import useAccountData from 'hooks/useAccountData';
 
 type RewardProps = {
   assetSymbol: string;
@@ -43,6 +44,7 @@ const Reward: FC<RewardProps> = ({ assetSymbol, amount, amountInUSD, xsDirection
 
 const UserRewards = () => {
   const { t } = useTranslation();
+  const { isFetching } = useAccountData();
   const { impersonateActive } = useWeb3();
   const { breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('lg'));
@@ -99,10 +101,9 @@ const UserRewards = () => {
         flexDirection={{ xs: 'column', lg: 'row' }}
         gap={{ xs: 1, lg: 2 }}
         alignItems={{ xs: 'none', lg: 'center' }}
-        mx={rewards && rewards.length > 1 ? 0 : 'auto'}
         mb={{ xs: 0.5, lg: 0 }}
       >
-        {rewards ? (
+        {!isFetching && rewards ? (
           rewards.map(({ assetSymbol, amount, amountInUSD }) => (
             <Box key={`${assetSymbol}_${amount}_${amountInUSD}`} display="flex" gap={2} alignItems="center">
               <Reward
@@ -114,7 +115,10 @@ const UserRewards = () => {
             </Box>
           ))
         ) : (
-          <Skeleton width={96} height={32} />
+          <>
+            <Skeleton width={120} height={42} />
+            <Skeleton width={120} height={42} />
+          </>
         )}
       </Box>
 

diff --git a/components/newDashboard/DashboardSummary/DashboardOverview/OverviewCard/index.tsx b/components/newDashboard/DashboardSummary/DashboardOverview/OverviewCard/index.tsx
@@ -31,7 +31,7 @@ const OverviewCard: FC<PropsWithChildren & OverviewCardProps> = ({
   mobileWrap,
 }) => {
   const { t } = useTranslation();
-  const { accountData } = useAccountData();
+  const { accountData, isFetching } = useAccountData();
 
   const loading = useMemo(() => !accountData, [accountData]);
   const empty = useMemo(() => total === '$0.00', [total]);
@@ -64,17 +64,21 @@ const OverviewCard: FC<PropsWithChildren & OverviewCardProps> = ({
             )}
           </Box>
           <Box display="flex" flexDirection={{ xs: 'column', lg: 'row' }} justifyContent="space-between" gap={2}>
-            {loading ? (
-              <Skeleton width={128} height={64} />
+            {isFetching || loading ? (
+              <Skeleton width={160} height={52} />
             ) : (
               <Typography variant="dashboardOverviewAmount">{total}</Typography>
             )}
             {!empty && (
               <Box display="flex" alignItems="center" gap={2}>
                 <Box display="flex" flexDirection="column" gap={0.5}>
-                  <Typography variant="h6" fontWeight={600}>
-                    {fixedValue}
-                  </Typography>
+                  {isFetching ? (
+                    <Skeleton width={80} height={28} />
+                  ) : (
+                    <Typography variant="h6" fontWeight={600}>
+                      {fixedValue}
+                    </Typography>
+                  )}
                   <Box display="flex" flexDirection={{ xs: mobileWrap ? 'column' : 'row', lg: 'row' }} gap={0.5}>
                     <Box display="flex" gap={0.5} alignItems="center">
                       <OperationLegend type="fixed" size="medium" />
@@ -88,9 +92,13 @@ const OverviewCard: FC<PropsWithChildren & OverviewCardProps> = ({
                 </Box>
                 <Divider orientation="vertical" flexItem />
                 <Box display="flex" flexDirection="column" gap={0.5}>
-                  <Typography variant="h6" fontWeight={600}>
-                    {floatingValue}
-                  </Typography>
+                  {isFetching ? (
+                    <Skeleton width={80} height={28} />
+                  ) : (
+                    <Typography variant="h6" fontWeight={600}>
+                      {floatingValue}
+                    </Typography>
+                  )}
                   <Box display="flex" flexDirection={{ xs: mobileWrap ? 'column' : 'row', lg: 'row' }} gap={0.5}>
                     <Box display="flex" gap={0.5} alignItems="center">
                       <OperationLegend type="variable" size="medium" />

diff --git a/hooks/useAccountData.ts b/hooks/useAccountData.ts
@@ -13,6 +13,7 @@ type AccountDataHook = {
   marketAccount?: MarketAccount;
   accountData?: readonly MarketAccount[];
   lastSync?: number;
+  isFetching: boolean;
   getMarketAccount: (symbol: string) => MarketAccount | undefined;
   refreshAccountData: (delay?: number) => Promise<void>;
 };
@@ -22,7 +23,7 @@ function useAccountData(): Omit<AccountDataHook, 'marketAccount'>;
 function useAccountData(
   symbol?: string,
 ): Omit<AccountDataHook, 'getMarketAccount'> | Omit<AccountDataHook, 'marketAccount'> {
-  const { isLoading, data, refetch } = usePreviewerExactly();
+  const { isLoading, isFetching, data, refetch } = usePreviewerExactly();
 
   const ctx = useContext(AccountDataContext);
 
@@ -52,6 +53,7 @@ function useAccountData(
     return {
       accountData: isLoading ? undefined : data,
       lastSync: ctx?.lastSync,
+      isFetching,
       getMarketAccount,
       refreshAccountData,
     };
@@ -60,6 +62,7 @@ function useAccountData(
   return {
     marketAccount,
     accountData: isLoading ? undefined : data,
+    isFetching,
     lastSync: ctx?.lastSync,
     refreshAccountData,
   };