fix: problem with endless loading of balances and names

leather-io · Apr 23, 2024 · e4d2c67 · e4d2c67
1 parent b0276ec
commit e4d2c67
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 14 deletions.
diff --git a/src/app/common/hooks/account/use-account-names.ts b/src/app/common/hooks/account/use-account-names.ts
@@ -23,12 +23,13 @@ export function useCurrentAccountDisplayName() {
 }
 
 export function useAccountDisplayName({ address, index }: { index: number; address: string }) {
-  const { data: names = [], isLoading } = useGetAccountNamesByAddressQuery(address);
+  const { data: names = [], isLoading, isFetching } = useGetAccountNamesByAddressQuery(address);
   return useMemo(() => {
     const name = names[0] || getAutogeneratedAccountDisplayName(index);
     return {
       name,
       isLoading,
+      isFetching,
     };
-  }, [names, index, isLoading]);
+  }, [names, index, isLoading, isFetching]);
 }
diff --git a/src/app/common/hooks/balance/btc/use-btc-balance.ts b/src/app/common/hooks/balance/btc/use-btc-balance.ts
@@ -11,6 +11,7 @@ export function useBtcAssetBalance(btcAddress: string) {
   const {
     btcBalance: btcAssetBalance,
     isLoading,
+    isFetching,
     isInitialLoading,
   } = useNativeSegwitBalance(btcAddress);
 
@@ -28,8 +29,9 @@ export function useBtcAssetBalance(btcAddress: string) {
         baseCurrencyAmountInQuote(btcAssetBalance.balance, btcMarketData)
       ),
       isLoading,
+      isFetching,
       isInitialLoading,
     }),
-    [btcAddress, btcAssetBalance, btcMarketData, isLoading, isInitialLoading]
+    [btcAddress, btcAssetBalance, btcMarketData, isLoading, isInitialLoading, isFetching]
   );
 }
diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx
@@ -20,13 +20,19 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
   const stxMarketData = useCryptoCurrencyMarketDataMeanAverage('STX');
 
   // get stx balance
-  const { data: balances, isLoading, isInitialLoading } = useStacksAccountBalances(stxAddress);
+  const {
+    data: balances,
+    isLoading,
+    isInitialLoading,
+    isFetching: isFetchingStacksBalance,
+  } = useStacksAccountBalances(stxAddress);
   const stxBalance = balances ? balances.stx.balance : createMoney(0, 'STX');
 
   // get btc balance
   const {
     btcAvailableAssetBalance,
     isLoading: isLoadingBtcBalance,
+    isFetching: isFetchingBtcBalance,
     isInitialLoading: isInititalLoadingBtcBalance,
   } = useBtcAssetBalance(btcAddress);
 
@@ -44,6 +50,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
       ),
       isLoading: isLoading || isLoadingBtcBalance,
       isInitialLoading: isInitialLoading || isInititalLoadingBtcBalance,
+      isFetching: isFetchingStacksBalance || isFetchingBtcBalance,
     };
   }, [
     btcAvailableAssetBalance.balance,
@@ -54,5 +61,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
     stxBalance,
     isLoading,
     isLoadingBtcBalance,
+    isFetchingStacksBalance,
+    isFetchingBtcBalance,
   ]);
 }
diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx
@@ -13,7 +13,7 @@ interface AccountTotalBalanceProps {
 }
 
 export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTotalBalanceProps) => {
-  const { totalUsdBalance, isLoading, isInitialLoading } = useTotalBalance({
+  const { totalUsdBalance, isFetching, isInitialLoading } = useTotalBalance({
     btcAddress,
     stxAddress,
   });
@@ -25,7 +25,7 @@ export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTota
       <styled.span
         className={shimmerStyles}
         textStyle="label.02"
-        data-state={isLoading ? 'loading' : undefined}
+        data-state={isFetching ? 'loading' : undefined}
       >
         {totalUsdBalance}
       </styled.span>

diff --git a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx b/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx
@@ -27,7 +27,7 @@ export const SwitchAccountListItem = memo(
       'SWITCH_ACCOUNTS' + stxAddress || btcAddress
     );
     const { handleSwitchAccount } = useSwitchAccount(handleClose);
-    const { name, isLoading: isLoadingBnsName } = useAccountDisplayName({
+    const { name, isFetching: isFetchingBnsName } = useAccountDisplayName({
       address: stxAddress,
       index,
     });
@@ -43,7 +43,7 @@ export const SwitchAccountListItem = memo(
     return (
       <AccountListItemLayout
         accountAddresses={<AcccountAddresses index={index} />}
-        accountName={<AccountNameLayout isLoading={isLoadingBnsName}>{name}</AccountNameLayout>}
+        accountName={<AccountNameLayout isLoading={isFetchingBnsName}>{name}</AccountNameLayout>}
         avatar={
           <AccountAvatarItem
             index={index}

diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx
@@ -28,7 +28,7 @@ export function Home() {
   const navigate = useNavigate();
   const account = useCurrentStacksAccount();
 
-  const { name, isLoading: isLoadingBnsName } = useAccountDisplayName({
+  const { name, isFetching: isFetchingBnsName } = useAccountDisplayName({
     address: account?.address || '',
     index: account?.index || 0,
   });
@@ -56,7 +56,7 @@ export function Home() {
             />
           }
           toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
-          isLoadingBnsName={isLoadingBnsName}
+          isFetchingBnsName={isFetchingBnsName}
           isLoadingBalance={isInitialLoading}
         >
           <AccountActions />

diff --git a/src/app/query/bitcoin/balance/btc-balance.hooks.ts b/src/app/query/bitcoin/balance/btc-balance.hooks.ts
@@ -17,6 +17,7 @@ export function useGetBitcoinBalanceByAddress(address: string) {
     data: utxos,
     isInitialLoading,
     isLoading,
+    isFetching,
   } = useNativeSegwitUtxosByAddress({
     address,
     filterInscriptionUtxos: true,
@@ -33,5 +34,6 @@ export function useGetBitcoinBalanceByAddress(address: string) {
     balance,
     isInitialLoading,
     isLoading,
+    isFetching,
   };
 }
diff --git a/src/app/query/bitcoin/balance/btc-native-segwit-balance.hooks.ts b/src/app/query/bitcoin/balance/btc-native-segwit-balance.hooks.ts
@@ -7,7 +7,8 @@ import { useGetBitcoinBalanceByAddress } from './btc-balance.hooks';
 
 // Balance is derived from a single query in address reuse mode
 export function useNativeSegwitBalance(address: string) {
-  const { balance, isInitialLoading, isLoading } = useGetBitcoinBalanceByAddress(address);
+  const { balance, isInitialLoading, isLoading, isFetching } =
+    useGetBitcoinBalanceByAddress(address);
 
   const wrappedBalance = useMemo(
     () => createBitcoinCryptoCurrencyAssetTypeWrapper(balance),
@@ -18,6 +19,7 @@ export function useNativeSegwitBalance(address: string) {
     btcBalance: wrappedBalance,
     isInitialLoading,
     isLoading,
+    isFetching,
   };
 }
 

diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
@@ -14,7 +14,7 @@ interface AccountCardProps {
   children: ReactNode;
   switchAccount: ReactNode;
   toggleSwitchAccount(): void;
-  isLoadingBnsName: boolean;
+  isFetchingBnsName: boolean;
   isLoadingBalance: boolean;
 }
 
@@ -24,7 +24,7 @@ export function AccountCard({
   switchAccount,
   toggleSwitchAccount,
   children,
-  isLoadingBnsName,
+  isFetchingBnsName,
   isLoadingBalance,
 }: AccountCardProps) {
   return (
@@ -44,7 +44,7 @@ export function AccountCard({
       >
         <Flex>
           <AccountNameLayout
-            isLoading={isLoadingBnsName}
+            isLoading={isFetchingBnsName}
             data-testid={SettingsSelectors.CurrentAccountDisplayName}
             textStyle="label.01"
           >