add loading state to account menu

ui/pages/Token.tsx

@@ -234,7 +234,7 @@ const TokenPageContent = () => {
     ...(contractQuery.data?.watchlist_names || []),
   ]
     .filter(Boolean)
-    .map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
+    .map((tag) => <Tag key={ tag.label } isLoading={ tokenQuery.isPlaceholderData }>{ tag.display_name }</Tag>);
   const tagsNode = tags.length > 0 ? <Flex columnGap={ 2 }>{ tags }</Flex> : null;
 
   return (

ui/shared/AddressActions/Menu.tsx

-import { Button, Menu, MenuButton, MenuList, Icon, Flex } from '@chakra-ui/react';
+import { Button, Menu, MenuButton, MenuList, Icon, Flex, Skeleton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -10,7 +10,11 @@ import PrivateTagMenuItem from './PrivateTagMenuItem';
 import PublicTagMenuItem from './PublicTagMenuItem';
 import TokenInfoMenuItem from './TokenInfoMenuItem';
 
-const AddressActions = () => {
+interface Props {
+  isLoading?: boolean;
+}
+
+const AddressActions = ({ isLoading }: Props) => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
@@ -18,17 +22,18 @@ const AddressActions = () => {
 
   return (
     <Menu>
-      <MenuButton
-        as={ Button }
-        size="sm"
-        variant="outline"
-        ml={ 2 }
-      >
-        <Flex alignItems="center">
-          <span>More</span>
-          <Icon as={ iconArrow } transform="rotate(-90deg)" boxSize={ 5 } ml={ 1 }/>
-        </Flex>
-      </MenuButton>
+      <Skeleton isLoaded={ !isLoading } ml={ 2 }>
+        <MenuButton
+          as={ Button }
+          size="sm"
+          variant="outline"
+        >
+          <Flex alignItems="center">
+            <span>More</span>
+            <Icon as={ iconArrow } transform="rotate(-90deg)" boxSize={ 5 } ml={ 1 }/>
+          </Flex>
+        </MenuButton>
+      </Skeleton>
       <MenuList minWidth="180px" zIndex="popover">
         { isTokenPage && appConfig.contractInfoApi.endpoint && appConfig.adminServiceApi.endpoint && <TokenInfoMenuItem py={ 2 } px={ 4 } hash={ hash }/> }
         <PrivateTagMenuItem py={ 2 } px={ 4 } hash={ hash }/>

ui/shared/AddressHeadingInfo.tsx

@@ -43,7 +43,7 @@ const AddressHeadingInfo = ({ address, token, isLinkDisabled, isLoading }: Props
         <AddressFavoriteButton hash={ address.hash } watchListId={ address.watchlist_address_id } ml={ 3 }/>
       ) }
       <AddressQrCode hash={ address.hash } ml={ 2 } isLoading={ isLoading }/>
-      { appConfig.isAccountSupported && <AddressActionsMenu/> }
+      { appConfig.isAccountSupported && <AddressActionsMenu isLoading={ isLoading }/> }
     </Flex>
   );
 };