Small mobile tweaks for m1 wallet page (#11975)

Author: faridsalau

packages/common/src/messages/walletMessages.ts

@@ -12,8 +12,5 @@ export const walletMessages = {
 
   // YourCoins messages
   yourCoins: 'Your Coins',
-  loading: '-- $AUDIO',
-  dollarZero: '$0.00',
-  loadingPrice: '$0.00 (loading...)',
   buySell: 'Buy/Sell'
 }

packages/mobile/src/screens/wallet-screen/components/CashWallet.tsx

@@ -18,9 +18,9 @@ import {
   IconInfo,
   IconLogoCircleUSDC,
   Paper,
+  Skeleton,
   Text
 } from '@audius/harmony-native'
-import LoadingSpinner from 'app/components/loading-spinner'
 import { make, track } from 'app/services/analytics'
 
 export const CashWallet = () => {
@@ -46,10 +46,6 @@ export const CashWallet = () => {
     bottomSheetModalRef.current?.present()
   }, [])
 
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
   return (
     <>
       <Paper>
@@ -70,9 +66,13 @@ export const CashWallet = () => {
             />
           </Flex>
 
-          <Text variant='display' size='m' color='default'>
-            ${balanceFormatted}
-          </Text>
+          {isLoading ? (
+            <Skeleton h='4xl' w='5xl' />
+          ) : (
+            <Text variant='display' size='m' color='default'>
+              {balanceFormatted}
+            </Text>
+          )}
 
           {!isManagedAccount ? (
             <Button variant='secondary' onPress={handleAddCash} fullWidth>

packages/mobile/src/screens/wallet-screen/components/YourCoins.tsx

@@ -1,13 +1,13 @@
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 
 import { useFormattedAudioBalance } from '@audius/common/hooks'
-import { walletMessages } from '@audius/common/messages'
 
 import {
   Flex,
   IconCaretRight,
   IconTokenAUDIO,
   Paper,
+  Skeleton,
   Text,
   cornerRadius
 } from '@audius/harmony-native'
@@ -27,10 +27,6 @@ export const YourCoins = () => {
     navigation.navigate('AudioScreen')
   }, [navigation])
 
-  const displayAmount = isAudioBalanceLoading
-    ? walletMessages.loading
-    : audioBalanceFormatted
-
   return (
     <Paper onPress={handleTokenClick}>
       <Flex
@@ -43,18 +39,26 @@ export const YourCoins = () => {
           <IconTokenAUDIO size='4xl' borderRadius={cornerRadius.circle} />
           <Flex direction='column' gap='xs'>
             <Flex direction='row' alignItems='center' gap='xs'>
-              <Text variant='heading' size='l' color='default'>
-                {displayAmount}
-              </Text>
-              <Text variant='heading' size='l' color='subdued'>
-                $AUDIO
-              </Text>
+              {isAudioBalanceLoading ? (
+                <Skeleton h='4xl' w='5xl' />
+              ) : (
+                <>
+                  <Text variant='heading' size='l' color='default'>
+                    {audioBalanceFormatted}
+                  </Text>
+                  <Text variant='heading' size='l' color='subdued'>
+                    $AUDIO
+                  </Text>
+                </>
+              )}
             </Flex>
-            <Text variant='heading' size='s' color='subdued'>
-              {isAudioPriceLoading
-                ? walletMessages.loadingPrice
-                : audioDollarValue}
-            </Text>
+            {isAudioPriceLoading ? (
+              <Skeleton h='l' w='3xl' />
+            ) : (
+              <Text variant='heading' size='s' color='subdued'>
+                {audioDollarValue}
+              </Text>
+            )}
           </Flex>
         </Flex>
         <IconCaretRight size='s' color='subdued' />