Use isPending instead of isLoading for balance loading state (#11978)

Author: faridsalau

packages/common/src/api/tan-query/wallets/useUSDCBalance.ts

@@ -81,7 +81,7 @@ export const useUSDCBalance = ({
 
   // Map TanStack Query states to the Status enum for API compatibility
   let status = Status.IDLE
-  if (result.isLoading) {
+  if (result.isPending) {
     status = Status.LOADING
   } else if (result.isError) {
     status = Status.ERROR

packages/web/src/pages/pay-and-earn-page/components/CashWallet.tsx

@@ -21,7 +21,7 @@ import {
   Text,
   IconButton,
   useMedia,
-  motion
+  Skeleton
 } from '@audius/harmony'
 
 import { useModalState } from 'common/hooks/useModalState'
@@ -112,17 +112,13 @@ export const CashWallet = () => {
           </Flex>
 
           {/* Balance Value */}
-          <Text
-            variant='display'
-            size='m'
-            color='default'
-            css={{
-              opacity: isLoading ? 0 : 1,
-              transition: `opacity ${motion.calm}`
-            }}
-          >
-            {balanceFormatted}
-          </Text>
+          {isLoading ? (
+            <Skeleton w='unit24' h='unit10' />
+          ) : (
+            <Text variant='display' size='m' color='default'>
+              {balanceFormatted}
+            </Text>
+          )}
 
           {/* Payout Wallet Info */}
           <Flex