fix: wrong bns name while loading

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

@@ -1,21 +1,24 @@
 import { memo } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
 
 import { shimmerStyles } from '@app/ui/shared/shimmer-styles';
 
-interface AccountNameLayoutProps {
+interface AccountNameLayoutProps extends HTMLStyledProps<'span'> {
   children: React.ReactNode;
   isLoading?: boolean;
 }
 
-export const AccountNameLayout = memo(({ children, isLoading }: AccountNameLayoutProps) => (
-  <styled.span
-    className={shimmerStyles}
-    textStyle="label.02"
-    aria-busy={isLoading}
-    data-state={isLoading ? 'loading' : undefined}
-  >
-    {children}
-  </styled.span>
-));
+export const AccountNameLayout = memo(
+  ({ children, isLoading, ...rest }: AccountNameLayoutProps) => (
+    <styled.span
+      className={shimmerStyles}
+      textStyle="label.02"
+      aria-busy={isLoading}
+      data-state={isLoading ? 'loading' : undefined}
+      {...rest}
+    >
+      {children}
+    </styled.span>
+  )
+);

src/app/pages/home/home.tsx

@@ -3,7 +3,7 @@ import { Route, useNavigate } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
 
-import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names';
+import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state';
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
 import { useOnMount } from '@app/common/hooks/use-on-mount';
@@ -26,9 +26,13 @@ export function Home() {
   const { decodedAuthRequest } = useOnboardingState();
 
   const navigate = useNavigate();
-  const name = useCurrentAccountDisplayName();
-
   const account = useCurrentStacksAccount();
+
+  const { name, isLoading: isLoadingBnsName } = useAccountDisplayName({
+    address: account?.address || '',
+    index: account?.index || 0,
+  });
+
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const { totalUsdBalance, isInitialLoading } = useTotalBalance({
     btcAddress,
@@ -52,6 +56,7 @@ export function Home() {
             />
           }
           toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
+          isLoadingBnsName={isLoadingBnsName}
           isLoadingBalance={isInitialLoading}
         >
           <AccountActions />

src/app/query/stacks/bns/bns.query.ts

@@ -13,7 +13,6 @@ import { fetchNamesForAddress } from './bns.utils';
 const staleTime = 24 * 60 * 60 * 1000; // 24 hours
 
 const bnsQueryOptions = {
-  keepPreviousData: true,
   cacheTime: Infinity,
   staleTime: staleTime,
   refetchOnMount: false,

src/app/ui/components/account/account.card.stories.tsx

@@ -22,6 +22,7 @@ export function AccountCard() {
       switchAccount={<></>}
       toggleSwitchAccount={() => null}
       isLoadingBalance={false}
+      isLoadingBnsName={false}
     >
       <Flex justify="space-between">
         <IconButton icon={<ArrowUpIcon />} label="Send" />
@@ -41,6 +42,27 @@ export function AccountCardLoading() {
       switchAccount={<></>}
       toggleSwitchAccount={() => null}
       isLoadingBalance
+      isLoadingBnsName={false}
+    >
+      <Flex justify="space-between">
+        <IconButton icon={<ArrowUpIcon />} label="Send" />
+        <IconButton icon={<ArrowDownIcon />} label="Receive" />
+        <IconButton icon={<PlusIcon />} label="Buy" />
+        <IconButton icon={<SwapIcon />} label="Swap" />
+      </Flex>
+    </Component>
+  );
+}
+
+export function AccountCardBnsNameLoading() {
+  return (
+    <Component
+      name="leather.btc"
+      balance="$1,000"
+      switchAccount={<></>}
+      toggleSwitchAccount={() => null}
+      isLoadingBalance={false}
+      isLoadingBnsName
     >
       <Flex justify="space-between">
         <IconButton icon={<ArrowUpIcon />} label="Send" />

src/app/ui/components/account/account.card.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
+import { AccountNameLayout } from '@app/components/account/account-name';
 import { Link } from '@app/ui/components/link/link';
 import { SkeletonLoader } from '@app/ui/components/skeleton-loader/skeleton-loader';
 import { ChevronDownIcon } from '@app/ui/icons';
@@ -13,6 +14,7 @@ interface AccountCardProps {
   children: ReactNode;
   switchAccount: ReactNode;
   toggleSwitchAccount(): void;
+  isLoadingBnsName: boolean;
   isLoadingBalance: boolean;
 }
 
@@ -22,6 +24,7 @@ export function AccountCard({
   switchAccount,
   toggleSwitchAccount,
   children,
+  isLoadingBnsName,
   isLoadingBalance,
 }: AccountCardProps) {
   return (
@@ -40,9 +43,14 @@ export function AccountCard({
         variant="text"
       >
         <Flex>
-          <styled.p data-testid={SettingsSelectors.CurrentAccountDisplayName} textStyle="label.01">
+          <AccountNameLayout
+            isLoading={isLoadingBnsName}
+            data-testid={SettingsSelectors.CurrentAccountDisplayName}
+            textStyle="label.01"
+          >
             {name}
-          </styled.p>
+          </AccountNameLayout>
+
           <Box mt="space.01" ml="space.02">
             <ChevronDownIcon variant="small" />
           </Box>