fix: display account wallet partially while loading (#420)

src/pages/account/wallet/AccountWallet.tsx

@@ -1,9 +1,9 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
+import { useNavigate } from 'react-router'
 import Download from 'remixicon-react/DownloadLineIcon'
 import Gift from 'remixicon-react/GiftLineIcon'
 import Link from 'remixicon-react/LinkIcon'
-import { useNavigate } from 'react-router'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
@@ -19,10 +19,6 @@ export function AccountWallet(): ReactElement {
 
   const navigate = useNavigate()
 
-  if (!balance || !nodeAddresses) {
-    return <Loading />
-  }
-
   function onCheckTransactions() {
     window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
   }
@@ -47,15 +43,23 @@ export function AccountWallet(): ReactElement {
           </SwarmButton>
         </Grid>
       </Box>
-      <Box mb={0.25}>
-        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
-      </Box>
-      <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
-      </Box>
-      <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
-      </Box>
+      {balance && nodeAddresses ? (
+        <>
+          <Box mb={0.25}>
+            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+          </Box>
+          <Box mb={0.25}>
+            <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+          </Box>
+          <Box mb={2}>
+            <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+          </Box>
+        </>
+      ) : (
+        <Box mb={8}>
+          <Loading />
+        </Box>
+      )}
       <ExpandableListItemActions>
         <SwarmButton onClick={onCheckTransactions} iconType={Link}>
           Check transactions on Blockscout