feat: balance skeleton loader

src/app/common/hooks/balance/btc/use-btc-balance.ts

@@ -8,7 +8,11 @@ import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/marke
 
 export function useBtcAssetBalance(btcAddress: string) {
   const btcMarketData = useCryptoCurrencyMarketData('BTC');
-  const btcAssetBalance = useNativeSegwitBalance(btcAddress);
+  const {
+    btcBalance: btcAssetBalance,
+    isLoading,
+    isInitialLoading,
+  } = useNativeSegwitBalance(btcAddress);
 
   return useMemo(
     () => ({
@@ -23,7 +27,9 @@ export function useBtcAssetBalance(btcAddress: string) {
       btcAvailableUsdBalance: i18nFormatCurrency(
         baseCurrencyAmountInQuote(btcAssetBalance.balance, btcMarketData)
       ),
+      isLoading,
+      isInitialLoading,
     }),
-    [btcAddress, btcAssetBalance, btcMarketData]
+    [btcAddress, btcAssetBalance, btcMarketData, isLoading, isInitialLoading]
   );
 }

src/app/common/hooks/balance/use-total-balance.tsx

@@ -20,19 +20,20 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
   const stxMarketData = useCryptoCurrencyMarketData('STX');
 
   // get stx balance
-  const { data: balances, isLoading } = useStacksAccountBalances(stxAddress);
+  const { data: balances, isLoading, isInitialLoading } = useStacksAccountBalances(stxAddress);
   const stxBalance = balances ? balances.stx.balance : createMoney(0, 'STX');
 
   // get btc balance
-  const btcBalance = useBtcAssetBalance(btcAddress);
+  const {
+    btcAvailableAssetBalance,
+    isLoading: isLoadingBtcBalance,
+    isInitialLoading: isInititalLoadingBtcBalance,
+  } = useBtcAssetBalance(btcAddress);
 
   return useMemo(() => {
     // calculate total balance
     const stxUsdAmount = baseCurrencyAmountInQuote(stxBalance, stxMarketData);
-    const btcUsdAmount = baseCurrencyAmountInQuote(
-      btcBalance.btcAvailableAssetBalance.balance,
-      btcMarketData
-    );
+    const btcUsdAmount = baseCurrencyAmountInQuote(btcAvailableAssetBalance.balance, btcMarketData);
 
     const totalBalance = { ...stxUsdAmount, amount: stxUsdAmount.amount.plus(btcUsdAmount.amount) };
     return {
@@ -41,7 +42,17 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
         totalBalance,
         totalBalance.amount.isGreaterThanOrEqualTo(100_000) ? 0 : 2
       ),
-      isLoading,
+      isLoading: isLoading || isLoadingBtcBalance,
+      isInitialLoading: isInitialLoading || isInititalLoadingBtcBalance,
     };
-  }, [btcBalance, btcMarketData, stxMarketData, isLoading, stxBalance]);
+  }, [
+    btcAvailableAssetBalance.balance,
+    btcMarketData,
+    isInitialLoading,
+    isInititalLoadingBtcBalance,
+    stxMarketData,
+    stxBalance,
+    isLoading,
+    isLoadingBtcBalance,
+  ]);
 }

src/app/components/account-total-balance.tsx

@@ -1,28 +1,35 @@
 import { memo } from 'react';
 
+import { css } from 'leather-styles/css';
 import { styled } from 'leather-styles/jsx';
 
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
 
-import { shimmerStyles } from '../../../theme/global/shimmer-styles';
+import { SkeletonLoader } from '../ui/components/skeleton-loader/skeleton-loader';
+import { shimmerStyles } from '../ui/shared/shimmer-styles';
 
 interface AccountTotalBalanceProps {
   btcAddress: string;
   stxAddress: string;
 }
+
 export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTotalBalanceProps) => {
-  const { totalUsdBalance, isLoading } = useTotalBalance({ btcAddress, stxAddress });
+  const { totalUsdBalance, isLoading, isInitialLoading } = useTotalBalance({
+    btcAddress,
+    stxAddress,
+  });
 
   if (!totalUsdBalance) return null;
 
   return (
-    <styled.span
-      fontWeight={500}
-      textStyle="label.02"
-      data-state={isLoading ? 'loading' : undefined}
-      className={shimmerStyles}
-    >
-      {totalUsdBalance}
-    </styled.span>
+    <SkeletonLoader width="200px" height="38px" isLoading={isInitialLoading}>
+      <styled.span
+        className={css(shimmerStyles)}
+        textStyle="label.02"
+        data-state={isLoading ? 'loading' : undefined}
+      >
+        {totalUsdBalance}
+      </styled.span>
+    </SkeletonLoader>
   );
 });

src/app/components/account/account-name.tsx

@@ -1,8 +1,9 @@
 import { memo } from 'react';
 
+import { css } from 'leather-styles/css';
 import { styled } from 'leather-styles/jsx';
 
-import { shimmerStyles } from '../../../../theme/global/shimmer-styles';
+import { shimmerStyles } from '@app/ui/shared/shimmer-styles';
 
 interface AccountNameLayoutProps {
   children: React.ReactNode;
@@ -11,11 +12,10 @@ interface AccountNameLayoutProps {
 
 export const AccountNameLayout = memo(({ children, isLoading }: AccountNameLayoutProps) => (
   <styled.span
-    fontWeight={500}
+    className={css(shimmerStyles)}
     textStyle="label.02"
     aria-busy={isLoading}
     data-state={isLoading ? 'loading' : undefined}
-    className={shimmerStyles}
   >
     {children}
   </styled.span>

src/app/components/balance-btc.tsx

@@ -3,7 +3,7 @@ import { useCurrentNativeSegwitAddressBalance } from '@app/query/bitcoin/balance
 import { Caption } from '@app/ui/components/typography/caption';
 
 export function BtcBalance() {
-  const balance = useCurrentNativeSegwitAddressBalance();
+  const { balance } = useCurrentNativeSegwitAddressBalance();
 
   return <Caption>{formatMoney(balance)}</Caption>;
 }

src/app/components/balance/bitcoin-balance-loader.tsx

@@ -4,10 +4,10 @@ import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-se
 
 interface BitcoinBalanceLoaderProps {
   address: string;
-  children(balance: BitcoinCryptoCurrencyAssetBalance): React.ReactNode;
+  children(balance: BitcoinCryptoCurrencyAssetBalance, isInitialLoading: boolean): React.ReactNode;
 }
 
 export function BitcoinBalanceLoader({ address, children }: BitcoinBalanceLoaderProps) {
-  const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(address);
-  return children(btcCryptoCurrencyAssetBalance);
+  const { btcBalance, isInitialLoading } = useNativeSegwitBalance(address);
+  return children(btcBalance, isInitialLoading);
 }

src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx

@@ -20,7 +20,7 @@ interface UseBitcoinCustomFeeArgs {
   recipient: string;
 }
 export function useBitcoinCustomFee({ amount, isSendingMax, recipient }: UseBitcoinCustomFeeArgs) {
-  const balance = useCurrentNativeSegwitAddressBalance();
+  const { balance } = useCurrentNativeSegwitAddressBalance();
   const { data: utxos = [] } = useCurrentNativeSegwitUtxos();
   const btcMarketData = useCryptoCurrencyMarketData('BTC');
 

src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts

@@ -43,7 +43,7 @@ export function useBitcoinFeesList({
   recipient,
   utxos,
 }: UseBitcoinFeesListArgs) {
-  const balance = useCurrentNativeSegwitAddressBalance();
+  const { balance } = useCurrentNativeSegwitAddressBalance();
   const btcMarketData = useCryptoCurrencyMarketData('BTC');
   const { data: feeRates, isLoading } = useAverageBitcoinFeeRates();
 

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx

@@ -15,7 +15,8 @@ import { Brc20TokenAssetItemLayout } from './components/brc20-token-asset-item.l
 export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
   const navigate = useNavigate();
   const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
-  const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
+  const { btcBalance: btcCryptoCurrencyAssetBalance } =
+    useNativeSegwitBalance(currentAccountBtcAddress);
 
   const hasPositiveBtcBalanceForFees =
     btcCryptoCurrencyAssetBalance.balance.amount.isGreaterThan(0);

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -33,7 +33,7 @@ export function Brc20TokenAssetItemLayout({
             label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
             side="left"
           >
-            <styled.span data-testid={token.ticker} fontWeight={500} textStyle="label.02">
+            <styled.span data-testid={token.ticker} textStyle="label.02">
               {formattedBalance.value}
             </styled.span>
           </BasicTooltip>

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -31,11 +31,12 @@ export function CryptoAssetList({
       <BitcoinNativeSegwitAccountLoader current>
         {signer => (
           <BitcoinBalanceLoader address={signer.address}>
-            {balance => (
+            {(balance, isLoading) => (
               <CryptoCurrencyAssetItemLayout
                 assetBalance={balance}
                 icon={<BtcAvatarIcon />}
                 onClick={() => onItemClick(balance)}
+                isLoading={isLoading}
               />
             )}
           </BitcoinBalanceLoader>

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -6,6 +6,7 @@ import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-bala
 
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { SkeletonLoader } from '@app/ui/components/skeleton-loader/skeleton-loader';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { Caption } from '@app/ui/components/typography/caption';
 import { Pressable } from '@app/ui/pressable/pressable';
@@ -18,6 +19,7 @@ interface CryptoCurrencyAssetItemLayoutProps {
   address?: string;
   assetBalance: AllCryptoCurrencyAssetBalances;
   icon: React.ReactNode;
+  isLoading?: boolean;
   onClick?(): void;
   rightElement?: React.ReactNode;
   usdBalance?: string;
@@ -31,44 +33,55 @@ export function CryptoCurrencyAssetItemLayout({
   onClick,
   rightElement,
   usdBalance,
+  isLoading = false,
 }: CryptoCurrencyAssetItemLayoutProps) {
   const { balance, dataTestId, formattedBalance, title } =
     parseCryptoCurrencyAssetBalance(assetBalance);
 
+  const titleRight = (
+    <SkeletonLoader width="126px" isLoading={isLoading}>
+      {rightElement ? (
+        rightElement
+      ) : (
+        <BasicTooltip
+          asChild
+          label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
+          side="left"
+        >
+          <styled.span data-testid={title} textStyle="label.02">
+            {formattedBalance.value} {additionalBalanceInfo}
+          </styled.span>
+        </BasicTooltip>
+      )}
+    </SkeletonLoader>
+  );
+
+  const captionRight = (
+    <SkeletonLoader width="78px" isLoading={isLoading}>
+      {rightElement ? (
+        rightElement
+      ) : (
+        <Caption>
+          <Flex alignItems="center" gap="space.02" color="inherit">
+            <BulletSeparator>
+              <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
+              {additionalUsdBalanceInfo}
+            </BulletSeparator>
+          </Flex>
+        </Caption>
+      )}
+    </SkeletonLoader>
+  );
+
   const isInteractive = !!onClick;
 
   const content = (
     <ItemLayout
       flagImg={icon}
       titleLeft={title}
       captionLeft={balance.symbol}
-      titleRight={
-        rightElement ? (
-          rightElement
-        ) : (
-          <BasicTooltip
-            asChild
-            label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-            side="left"
-          >
-            <styled.span data-testid={title} fontWeight={500} textStyle="label.02">
-              {formattedBalance.value} {additionalBalanceInfo}
-            </styled.span>
-          </BasicTooltip>
-        )
-      }
-      captionRight={
-        !rightElement && (
-          <Caption>
-            <Flex alignItems="center" gap="space.02" color="inherit">
-              <BulletSeparator>
-                <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
-                {additionalUsdBalanceInfo}
-              </BulletSeparator>
-            </Flex>
-          </Caption>
-        )
-      }
+      titleRight={titleRight}
+      captionRight={captionRight}
     />
   );
 

src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx

@@ -40,7 +40,7 @@ export function StacksFungibleTokenAssetItemLayout({
             label={formattedBalance.isAbbreviated ? amount : undefined}
             side="left"
           >
-            <styled.span data-testid={title} fontWeight={500} textStyle="label.02">
+            <styled.span data-testid={title} textStyle="label.02">
               {formattedBalance.value}
             </styled.span>
           </BasicTooltip>

src/app/components/transaction-item/transaction-item.layout.tsx

@@ -16,6 +16,7 @@ interface TransactionItemLayoutProps {
   txStatus?: ReactNode;
   children?: ReactNode;
 }
+
 export function TransactionItemLayout({
   openTxLink,
   rightElement,
@@ -37,13 +38,7 @@ export function TransactionItemLayout({
           </HStack>
         }
         titleRight={
-          rightElement ? (
-            rightElement
-          ) : (
-            <styled.span fontWeight={500} textStyle="label.02">
-              {txValue}
-            </styled.span>
-          )
+          rightElement ? rightElement : <styled.span textStyle="label.02">{txValue}</styled.span>
         }
       />
     </Pressable>

src/app/components/transaction/transaction-title.tsx

@@ -22,7 +22,6 @@ export function TransactionTitle(props: TransactionTitleProps) {
   return (
     <BasicTooltip disabled={!isEllipsisActive} label={title} side="top">
       <Title
-        fontWeight={500}
         overflow="hidden"
         ref={ref}
         textOverflow="ellipsis"

src/app/features/asset-list/asset-list.tsx

@@ -27,7 +27,8 @@ export function AssetsList() {
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const network = useCurrentNetwork();
 
-  const { btcAvailableAssetBalance, btcAvailableUsdBalance } = useBtcAssetBalance(btcAddress);
+  const { btcAvailableAssetBalance, btcAvailableUsdBalance, isInitialLoading } =
+    useBtcAssetBalance(btcAddress);
 
   const { whenWallet } = useWalletType();
 
@@ -40,6 +41,7 @@ export function AssetsList() {
             usdBalance={btcAvailableUsdBalance}
             icon={<BtcAvatarIcon />}
             address={btcAddress}
+            isLoading={isInitialLoading}
           />
         ),
         ledger: (
@@ -48,6 +50,7 @@ export function AssetsList() {
             usdBalance={btcAvailableUsdBalance}
             icon={<BtcAvatarIcon />}
             address={btcAddress}
+            isLoading={isInitialLoading}
             rightElement={
               hasBitcoinLedgerKeys ? undefined : <ConnectLedgerAssetBtn chain="bitcoin" />
             }

src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx

@@ -46,7 +46,7 @@ export function BitcoinChooseFee({
   ...rest
 }: BitcoinChooseFeeProps) {
   const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
-  const btcBalance = useNativeSegwitBalance(nativeSegwitSigner.address);
+  const { btcBalance } = useNativeSegwitBalance(nativeSegwitSigner.address);
   const hasAmount = amount.amount.isGreaterThan(0);
   const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate);
 

src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts

@@ -7,7 +7,7 @@ import { useCurrentNativeSegwitAddressBalance } from '@app/query/bitcoin/balance
 
 export function useValidateBitcoinSpend(amount?: Money, isSendingMax?: boolean) {
   const [showInsufficientBalanceError, setShowInsufficientBalanceError] = useState(false);
-  const balance = useCurrentNativeSegwitAddressBalance();
+  const { balance } = useCurrentNativeSegwitAddressBalance();
 
   return {
     showInsufficientBalanceError,