fix: asset row skeleton loader

package.json

@@ -139,7 +139,7 @@
     "@leather-wallet/constants": "0.6.3",
     "@leather-wallet/crypto": "1.0.1",
     "@leather-wallet/models": "0.8.0",
-    "@leather-wallet/query": "0.8.6",
+    "@leather-wallet/query": "0.8.7",
     "@leather-wallet/tokens": "0.5.2",
     "@leather-wallet/utils": "0.8.1",
     "@ledgerhq/hw-transport-webusb": "6.27.19",

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

@@ -27,12 +27,8 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
   const stxBalance = balance ? balance.totalBalance : createMoney(0, 'STX');
 
   // get btc balance
-  const {
-    balance: btcBalance,
-    isLoading: isLoadingBtcBalance,
-    isFetching: isFetchingBtcBalance,
-    isInitialLoading: isInititalLoadingBtcBalance,
-  } = useBtcCryptoAssetBalanceNativeSegwit(btcAddress);
+  const { balance: btcBalance, query: btcQueryResult } =
+    useBtcCryptoAssetBalanceNativeSegwit(btcAddress);
 
   return useMemo(() => {
     // calculate total balance
@@ -46,20 +42,20 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
         totalBalance,
         totalBalance.amount.isGreaterThanOrEqualTo(100_000) ? 0 : 2
       ),
-      isLoading: isLoading || isLoadingBtcBalance,
-      isInitialLoading: isInitialLoading || isInititalLoadingBtcBalance,
-      isFetching: isFetchingStacksBalance || isFetchingBtcBalance,
+      isLoading: isLoading || btcQueryResult.isLoading,
+      isInitialLoading: isInitialLoading || btcQueryResult.isInitialLoading,
+      isFetching: isFetchingStacksBalance || btcQueryResult.isFetching,
     };
   }, [
     stxBalance,
     stxMarketData,
     btcBalance.availableBalance,
     btcMarketData,
     isLoading,
-    isLoadingBtcBalance,
+    btcQueryResult.isLoading,
+    btcQueryResult.isInitialLoading,
+    btcQueryResult.isFetching,
     isInitialLoading,
-    isInititalLoadingBtcBalance,
     isFetchingStacksBalance,
-    isFetchingBtcBalance,
   ]);
 }

src/app/components/crypto-asset-item/crypto-asset-item-error.tsx

@@ -0,0 +1,39 @@
+import type { QueryObserverResult } from '@tanstack/react-query';
+import { Box, styled } from 'leather-styles/jsx';
+
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+
+interface CryptoAssetItemErrorProps {
+  caption: string;
+  icon: React.ReactNode;
+  onRefetch?(): Promise<QueryObserverResult<unknown, unknown>>;
+  title: string;
+}
+export function CryptoAssetItemError({
+  caption,
+  icon,
+  onRefetch,
+  title,
+}: CryptoAssetItemErrorProps) {
+  return (
+    <Box my="space.02">
+      <ItemLayout
+        flagImg={icon}
+        titleLeft={title}
+        captionLeft={caption}
+        titleRight={
+          <styled.span color="ink.text-subdued" textStyle="label.02">
+            Unable to load
+          </styled.span>
+        }
+        captionRight={
+          onRefetch && (
+            <styled.button lineHeight="20px" onClick={onRefetch}>
+              <styled.span textStyle="caption.01">Retry</styled.span>
+            </styled.button>
+          )
+        }
+      />
+    </Box>
+  );
+}

src/app/components/crypto-asset-item/crypto-asset-item-placeholder.tsx

@@ -0,0 +1,18 @@
+import { Box, Circle } from 'leather-styles/jsx';
+
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { SkeletonLoader } from '@app/ui/components/skeleton-loader/skeleton-loader';
+
+export function CryptoAssetItemPlaceholder() {
+  return (
+    <Box my="space.02">
+      <ItemLayout
+        flagImg={<Circle bgColor="ink.text-non-interactive" size="36px" />}
+        titleLeft={<SkeletonLoader isLoading height="20px" width="126px" />}
+        captionLeft={<SkeletonLoader isLoading height="20px" width="78px" />}
+        titleRight={<SkeletonLoader isLoading width="126px" />}
+        captionRight={<SkeletonLoader isLoading width="78px" />}
+      />
+    </Box>
+  );
+}

src/app/components/loaders/btc-balance-loader.tsx

@@ -1,12 +1,20 @@
 import type { BtcCryptoAssetBalance } from '@leather-wallet/models';
+import { isFetchedWithSuccess, isInitializingData } from '@leather-wallet/query';
 
 import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
+
+import { CryptoAssetItemError } from '../crypto-asset-item/crypto-asset-item-error';
+import { CryptoAssetItemPlaceholder } from '../crypto-asset-item/crypto-asset-item-placeholder';
 
 interface BtcBalanceLoaderProps {
   address: string;
   children(balance: BtcCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode;
 }
 export function BtcBalanceLoader({ address, children }: BtcBalanceLoaderProps) {
-  const { balance, isInitialLoading } = useBtcCryptoAssetBalanceNativeSegwit(address);
-  return children(balance, isInitialLoading);
+  const { balance, query: result } = useBtcCryptoAssetBalanceNativeSegwit(address);
+  if (isInitializingData(result)) return <CryptoAssetItemPlaceholder />;
+  if (!isFetchedWithSuccess(result))
+    return <CryptoAssetItemError caption="BTC" icon={<BtcAvatarIcon />} title="Bitcoin" />;
+  return children(balance, result.isInitialLoading);
 }

src/app/components/loaders/stx-balance-loader.tsx

@@ -1,15 +1,34 @@
 import type { StxCryptoAssetBalance } from '@leather-wallet/models';
-import { useStxCryptoAssetBalance } from '@leather-wallet/query';
+import {
+  isErrorTooManyRequests,
+  isFetchedWithSuccess,
+  isInitializingData,
+  useStxCryptoAssetBalance,
+} from '@leather-wallet/query';
 
-import { isFetchedWithSuccess } from '@app/query/query-config';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+
+import { CryptoAssetItemError } from '../crypto-asset-item/crypto-asset-item-error';
+import { CryptoAssetItemPlaceholder } from '../crypto-asset-item/crypto-asset-item-placeholder';
 
 interface StxBalanceLoaderProps {
   address: string;
   children(balance: StxCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode;
 }
 export function StxBalanceLoader({ address, children }: StxBalanceLoaderProps) {
   const result = useStxCryptoAssetBalance(address);
-  if (!isFetchedWithSuccess(result)) return null;
+  if (isInitializingData(result)) return <CryptoAssetItemPlaceholder />;
+  if (isErrorTooManyRequests(result))
+    return (
+      <CryptoAssetItemError
+        caption="STX"
+        icon={<StxAvatarIcon />}
+        onRefetch={() => result.refetch()}
+        title="Stacks"
+      />
+    );
+  if (!isFetchedWithSuccess(result))
+    return <CryptoAssetItemError caption="STX" icon={<StxAvatarIcon />} title="Stacks" />;
   const { data: balance, isInitialLoading } = result;
   return children(balance, isInitialLoading);
 }

src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx

@@ -25,7 +25,7 @@ interface Brc20TokenAssetListProps {
 }
 export function Brc20TokenAssetList({ tokens, variant }: Brc20TokenAssetListProps) {
   const navigate = useNavigate();
-  const { balance, isInitialLoading } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
+  const { balance, query: result } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
 
   const hasPositiveBtcBalanceForFees =
     variant === 'interactive' && balance.availableBalance.amount.isGreaterThan(0);
@@ -49,7 +49,7 @@ export function Brc20TokenAssetList({ tokens, variant }: Brc20TokenAssetListProp
           availableBalance={token.balance.availableBalance}
           captionLeft={token.info.name.toUpperCase()}
           icon={<Brc20AvatarIcon />}
-          isLoading={isInitialLoading}
+          isLoading={result.isInitialLoading}
           key={token.info.symbol}
           onSelectAsset={
             hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : undefined

src/app/features/collectibles/hooks/use-is-fetching-collectibles.ts

@@ -1,9 +1,8 @@
 import { useIsFetching } from '@tanstack/react-query';
 
+import { QueryPrefixes } from '@leather-wallet/query';
 import { sumNumbers } from '@leather-wallet/utils';
 
-import { QueryPrefixes } from '@app/query/query-prefixes';
-
 function areAnyQueriesFetching(...args: number[]) {
   return sumNumbers(args).toNumber() > 0;
 }

src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts

@@ -20,31 +20,24 @@ function createBtcCryptoAssetBalance(balance: Money): BtcCryptoAssetBalance {
 export function useBtcCryptoAssetBalanceNativeSegwit(address: string) {
   const runesEnabled = useRunesEnabled();
 
-  const {
-    data: utxos,
-    isInitialLoading,
-    isLoading,
-    isFetching,
-  } = useNativeSegwitUtxosByAddress({
+  const query = useNativeSegwitUtxosByAddress({
     address,
     filterInscriptionUtxos: true,
     filterPendingTxsUtxos: true,
     filterRunesUtxos: runesEnabled,
   });
 
   const balance = useMemo(() => {
-    if (isUndefined(utxos))
+    if (isUndefined(query.data))
       return createBtcCryptoAssetBalance(createMoney(new BigNumber(0), 'BTC'));
     return createBtcCryptoAssetBalance(
-      createMoney(sumNumbers(utxos.map(utxo => utxo.value)), 'BTC')
+      createMoney(sumNumbers(query.data.map(utxo => utxo.value)), 'BTC')
     );
-  }, [utxos]);
+  }, [query.data]);
 
   return {
     balance,
-    isInitialLoading,
-    isLoading,
-    isFetching,
+    query,
   };
 }
 

src/app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks.ts

@@ -9,6 +9,7 @@ import {
 import {
   createBrc20TransferInscription,
   encodeBrc20TransferInscription,
+  isFetchedWithSuccess,
   useAverageBitcoinFeeRates,
   useCalculateBitcoinFiatValue,
   useConfigOrdinalsbot,
@@ -17,7 +18,6 @@ import {
 } from '@leather-wallet/query';
 import { createMoney, unitToFractionalUnit } from '@leather-wallet/utils';
 
-import { isFetchedWithSuccess } from '@app/query/query-config';
 import { useAppDispatch } from '@app/store';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';

src/app/ui/components/skeleton-loader/skeleton-loader.tsx

@@ -8,7 +8,6 @@ interface SkeletonLoaderProps {
   width?: string;
   height?: string;
 }
-
 export function SkeletonLoader({
   children,
   width = '30px',