fix loading state of profile button

lib/web3/useAccountWithDomain.ts

@@ -6,7 +6,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import useAccount from './useAccount';
 
 export default function useAccountWithDomain(isEnabled: boolean) {
-  const { address } = useAccount();
+  const { address, isConnecting } = useAccount();
 
   const isQueryEnabled = config.features.nameService.isEnabled && Boolean(address) && Boolean(isEnabled);
 
@@ -25,7 +25,7 @@ export default function useAccountWithDomain(isEnabled: boolean) {
     return {
       address: isEnabled ? address : undefined,
       domain: domainQuery.data?.domain?.name,
-      isLoading: isQueryEnabled && domainQuery.isLoading,
+      isLoading: (isQueryEnabled && domainQuery.isLoading) || isConnecting,
     };
-  }, [ address, domainQuery.data?.domain?.name, domainQuery.isLoading, isEnabled, isQueryEnabled ]);
+  }, [ address, domainQuery.data?.domain?.name, domainQuery.isLoading, isEnabled, isQueryEnabled, isConnecting ]);
 }

ui/snippets/user/profile/UserProfileButton.tsx

@@ -42,8 +42,11 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending, ..
     e.preventDefault();
   }, []);
 
+  const isButtonLoading = isPending || !isFetched || web3AccountWithDomain.isLoading;
+  const dataExists = !isButtonLoading && (Boolean(data) || Boolean(web3AccountWithDomain.address));
+
   const content = (() => {
-    if (web3AccountWithDomain.address) {
+    if (web3AccountWithDomain.address && !isButtonLoading) {
       return (
         <HStack gap={ 2 }>
           <UserIdenticon address={ web3AccountWithDomain.address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
@@ -54,7 +57,7 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending, ..
       );
     }
 
-    if (!data) {
+    if (!data || isButtonLoading) {
       return 'Log in';
     }
 
@@ -66,9 +69,6 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending, ..
     );
   })();
 
-  const isButtonLoading = isPending || !isFetched;
-  const dataExists = !isButtonLoading && (Boolean(data) || Boolean(web3AccountWithDomain.address));
-
   return (
     <Tooltip
       content={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }