extends Tag component

ui/pages/Token.tsx

-import { Skeleton, Box, Icon, Tag } from '@chakra-ui/react';
+import { Box, Icon } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
@@ -20,6 +20,7 @@ import * as addressStubs from 'stubs/address';
 import * as tokenStubs from 'stubs/token';
 import AddressContract from 'ui/address/AddressContract';
 import TextAd from 'ui/shared/ad/TextAd';
+import Tag from 'ui/shared/chakra/Tag';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
@@ -217,7 +218,7 @@ const TokenPageContent = () => {
         additionalsLeft={ (
           <TokenLogo hash={ tokenQuery.data?.address } name={ tokenQuery.data?.name } boxSize={ 6 } isLoading={ tokenQuery.isPlaceholderData }/>
         ) }
-        additionalsRight={ <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } borderRadius="sm"><Tag>{ tokenQuery.data?.type }</Tag></Skeleton> }
+        additionalsRight={ <Tag isLoading={ tokenQuery.isPlaceholderData }>{ tokenQuery.data?.type }</Tag> }
       />
       <TokenContractInfo tokenQuery={ tokenQuery } contractQuery={ contractQuery }/>
       <TokenDetails tokenQuery={ tokenQuery }/>

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

 import {
-  Tag,
   Tr,
   Td,
-  Skeleton,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { AddressTag } from 'types/api/account';
 
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import Tag from 'ui/shared/chakra/Tag';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 interface Props {
   item: AddressTag;
@@ -34,11 +32,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick, isLoading }: Pr
         <AddressSnippet address={ item.address } isLoading={ isLoading }/>
       </Td>
       <Td whiteSpace="nowrap">
-        <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm" maxW="100%">
-          <TruncatedTextTooltip label={ item.name }>
-            <Tag>{ item.name }</Tag>
-          </TruncatedTextTooltip>
-        </Skeleton>
+        <Tag isLoading={ isLoading } isTruncated>{ item.name }</Tag>
       </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>

ui/shared/chakra/Tag.tsx

+import { Skeleton, Tag as ChakraTag } from '@chakra-ui/react';
+import type { TagProps } from '@chakra-ui/react';
+import React from 'react';
+
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+
+interface Props extends TagProps {
+  isLoading?: boolean;
+}
+
+const Tag = ({ isLoading, ...props }: Props) => {
+
+  if (props.isTruncated && typeof props.children === 'string') {
+    if (!props.children) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm" maxW="100%">
+        <TruncatedTextTooltip label={ props.children }>
+          <ChakraTag { ...props }/>
+        </TruncatedTextTooltip>
+      </Skeleton>
+    );
+  }
+  return (
+    <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm" maxW="100%">
+      <ChakraTag { ...props }/>
+    </Skeleton>
+  );
+};
+
+export default React.memo(Tag);

ui/token/TokenTransfer/TokenTransferTableItem.tsx

-import { Tr, Td, Tag, Text, Icon, Grid, Skeleton } from '@chakra-ui/react';
+import { Tr, Td, Icon, Grid, Skeleton, Box } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -9,8 +9,8 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Tag from 'ui/shared/chakra/Tag';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean }
 
@@ -43,20 +43,16 @@ const TokenTransferTableItem = ({
             <AddressLink type="transaction" hash={ txHash } isLoading={ isLoading }/>
           </Address>
           { timestamp && (
-            <Text color="gray.500" fontWeight="400" ml="10px">
-              <Skeleton isLoaded={ !isLoading } display="inline-block">
-                { timeAgo }
-              </Skeleton>
-            </Text>
+            <Skeleton isLoaded={ !isLoading } display="inline-block" color="gray.500" fontWeight="400" ml="10px">
+              { timeAgo }
+            </Skeleton>
           ) }
         </Grid>
       </Td>
       <Td>
-        <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm" maxW="100%" my="3px">
-          <TruncatedTextTooltip label={ method || '' }>
-            { method ? <Tag> { method } </Tag> : '-' }
-          </TruncatedTextTooltip>
-        </Skeleton>
+        <Box my="3px">
+          <Tag isLoading={ isLoading } isTruncated>{ method }</Tag>
+        </Box>
       </Td>
       <Td>
         <Address display="inline-flex" maxW="100%" py="3px">