feat: add balances shimmer loader, closes #5119

leather-io · Mar 28, 2024 · 53a8b08 · 53a8b08
1 parent a985e0f
commit 53a8b08
Show file tree

Hide file tree

Showing 26 changed files with 233 additions and 77 deletions.
diff --git a/src/app/common/hooks/balance/btc/use-btc-balance.ts b/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]
   );
 }
diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/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,
+  ]);
 }
diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx
@@ -1,26 +1,36 @@
 import { memo } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { css } from 'leather-styles/css';
+import { type BoxProps, styled } from 'leather-styles/jsx';
 
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
 
-import { shimmerStyles } from '../../../theme/global/shimmer-styles';
+import { shimmerStyles } from '../../shared/shimmer-styles';
+import { BalanceShimmer } from './balance/balance-shimmer';
 
-interface AccountTotalBalanceProps {
+interface AccountTotalBalanceProps extends BoxProps {
   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;
 
+  if (isInitialLoading) {
+    return <BalanceShimmer height="20px" />;
+  }
+
   return (
     <styled.span
+      className={css(shimmerStyles)}
       fontWeight={500}
       textStyle="label.02"
       data-state={isLoading ? 'loading' : undefined}
-      className={shimmerStyles}
     >
       {totalUsdBalance}
     </styled.span>

diff --git a/src/app/components/account/account-name.tsx b/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 '../../../shared/shimmer-styles';
 
 interface AccountNameLayoutProps {
   children: React.ReactNode;
@@ -11,11 +12,11 @@ interface AccountNameLayoutProps {
 
 export const AccountNameLayout = memo(({ children, isLoading }: AccountNameLayoutProps) => (
   <styled.span
+    className={css(shimmerStyles)}
     fontWeight={500}
     textStyle="label.02"
     aria-busy={isLoading}
     data-state={isLoading ? 'loading' : undefined}
-    className={shimmerStyles}
   >
     {children}
   </styled.span>

diff --git a/src/app/components/balance-btc.tsx b/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>;
 }
diff --git a/src/app/components/balance/balance-shimmer.stories.tsx b/src/app/components/balance/balance-shimmer.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react';
+
+import { BalanceShimmer as Component } from './balance-shimmer';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Layout/BalanceShimmer',
+};
+
+export default meta;
+
+export function CryptoAssetTokenBalance() {
+  return <Component width="126px" />;
+}
+
+export function CryptoAssetUsdBalance() {
+  return <Component width="78px" />;
+}
diff --git a/src/app/components/balance/balance-shimmer.tsx b/src/app/components/balance/balance-shimmer.tsx
@@ -0,0 +1,24 @@
+import { css } from 'leather-styles/css';
+import { Box } from 'leather-styles/jsx';
+
+export function BalanceShimmer({ ...rest }) {
+  return (
+    <Box
+      width="30px"
+      height="30px"
+      bgColor="ink.non-interactive"
+      data-state="loading"
+      borderRadius="sm"
+      className={css({
+        '&[data-state=loading]': {
+          display: 'inline-block',
+          WebkitMask: 'linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%',
+          backgroundRepeat: 'no-repeat',
+          animation: 'shimmer 1.5s infinite',
+          color: 'ink.text-subdued',
+        },
+      })}
+      {...rest}
+    />
+  );
+}
diff --git a/src/app/components/balance/bitcoin-balance-loader.tsx b/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);
 }
diff --git a/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx b/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');
 

diff --git a/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts b/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();
 

diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/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);

diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx b/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>

diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -4,6 +4,7 @@ import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
+import { BalanceShimmer } from '@app/components/balance/balance-shimmer';
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
@@ -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,50 @@ export function CryptoCurrencyAssetItemLayout({
   onClick,
   rightElement,
   usdBalance,
+  isLoading,
 }: CryptoCurrencyAssetItemLayoutProps) {
   const { balance, dataTestId, formattedBalance, title } =
     parseCryptoCurrencyAssetBalance(assetBalance);
 
+  const titleRight = isLoading ? (
+    <BalanceShimmer width="126px" />
+  ) : 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>
+  );
+
+  const captionRight = isLoading ? (
+    <BalanceShimmer width="78px" />
+  ) : 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>
+  );
   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}
     />
   );
 

diff --git a/src/app/features/asset-list/asset-list.tsx b/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" />
             }

diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/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);
 

diff --git a/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts b/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,

diff --git a/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx b/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx
@@ -92,7 +92,8 @@ function PendingBrcTransfer({ order }: PendingBrcTransferProps) {
   const navigate = useNavigate();
   const ordinalsbotClient = useOrdinalsbotClient();
   const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
-  const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
+  const { btcBalance: btcCryptoCurrencyAssetBalance } =
+    useNativeSegwitBalance(currentAccountBtcAddress);
 
   const hasPositiveBtcBalanceForFees =
     btcCryptoCurrencyAssetBalance.balance.amount.isGreaterThan(0);