Icon component with skeleton

ui/block/BlockDetails.tsx

-import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
@@ -20,6 +20,7 @@ import { space } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
@@ -159,9 +160,7 @@ const BlockDetails = ({ query }: Props) => {
         hint="Date & time at which block was produced."
         isLoading={ isPlaceholderData }
       >
-        <Skeleton isLoaded={ !isPlaceholderData } boxSize={ 5 } borderRadius="full">
-          <Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
-        </Skeleton>
+        <Icon as={ clockIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
         <Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>
           { dayjs(data.timestamp).fromNow() }
         </Skeleton>
@@ -281,9 +280,7 @@ const BlockDetails = ({ query }: Props) => {
         }
         isLoading={ isPlaceholderData }
       >
-        <Skeleton isLoaded={ !isPlaceholderData } boxSize={ 5 }>
-          <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-        </Skeleton>
+        <Icon as={ flameIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
         <Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>
           { burntFees.dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
         </Skeleton>

ui/blocks/BlocksListItem.tsx

-import { Flex, Skeleton, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, Box, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import { route } from 'nextjs-routes';
@@ -13,6 +13,7 @@ import { WEI } from 'lib/consts';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -97,9 +98,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <Text fontWeight={ 500 }>Burnt fees</Text>
           <Flex columnGap={ 4 } mt={ 2 }>
             <Flex>
-              <Skeleton isLoaded={ !isLoading } boxSize={ 5 } display="inline-block">
-                <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-              </Skeleton>
+              <Icon as={ flameIcon } boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
               <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary" ml={ 1 }>
                 <span>{ burntFees.div(WEI).toFixed() }</span>
               </Skeleton>

ui/blocks/BlocksTableItem.tsx

-import { Tr, Td, Flex, Box, Icon, Tooltip, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Tr, Td, Flex, Box, Tooltip, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import { motion } from 'framer-motion';
 import { route } from 'nextjs-routes';
@@ -12,6 +12,7 @@ import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import LinkInternal from 'ui/shared/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -110,9 +111,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
       { !appConfig.L2.isL2Network && (
         <Td fontSize="sm">
           <Flex alignItems="center" columnGap={ 1 }>
-            <Skeleton isLoaded={ !isLoading } boxSize={ 5 }>
-              <Icon as={ flameIcon } boxSize={ 5 } color={ burntFeesIconColor }/>
-            </Skeleton>
+            <Icon as={ flameIcon } boxSize={ 5 } color={ burntFeesIconColor } isLoading={ isLoading }/>
             <Skeleton isLoaded={ !isLoading } display="inline-block">
               { burntFees.dividedBy(WEI).toFixed(8) }
             </Skeleton>

ui/shared/ApiKeySnippet.tsx

-import { Box, HStack, Icon, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Box, HStack, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import keyIcon from 'icons/key.svg';
+import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface Props {
@@ -13,9 +14,7 @@ interface Props {
 const ApiKeySnippet = ({ apiKey, name, isLoading }: Props) => {
   return (
     <HStack spacing={ 2 } alignItems="start">
-      <Skeleton isLoaded={ !isLoading } boxSize={ 6 } display="inline-block">
-        <Icon as={ keyIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
-      </Skeleton>
+      <Icon as={ keyIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') } isLoading={ isLoading }/>
       <Box>
         <Flex alignItems={{ base: 'flex-start', lg: 'center' }}>
           <Skeleton isLoaded={ !isLoading } display="inline-block" fontWeight={ 600 } mr={ 1 }>

ui/shared/TokenTransfer/TokenTransferListItem.tsx

-import { Flex, Icon, Skeleton } from '@chakra-ui/react';
+import { Flex, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -10,6 +10,7 @@ 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 Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import InOutTag from 'ui/shared/InOutTag';
@@ -66,14 +67,13 @@ const TokenTransferListItem = ({
       { showTxInfo && txHash && (
         <Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
           <Flex>
-            <Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 2 } borderRadius="base">
             <Icon
               as={ transactionIcon }
               boxSize="30px"
               color="link"
+              isLoading={ isLoading }
             />
-            </Skeleton>
-            <Address width="100%">
+            <Address width="100%" ml={ 2 }>
               <AddressLink
                 hash={ txHash }
                 type="transaction"
@@ -98,7 +98,7 @@ const TokenTransferListItem = ({
         </Address>
         { baseAddress ?
           <InOutTag isIn={ baseAddress === to.hash } isOut={ baseAddress === from.hash } w="50px" textAlign="center" isLoading={ isLoading }/> :
-          <Skeleton isLoaded={ !isLoading } boxSize={ 6 }><Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/></Skeleton>
+          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
         }
         <Address width={ addressWidth }>
           <AddressIcon address={ to } isLoading={ isLoading }/>

ui/shared/TokenTransfer/TokenTransferNft.tsx

-import { Box, Icon, chakra, Skeleton } from '@chakra-ui/react';
+import { Box, chakra, Skeleton } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
 import nftPlaceholder from 'icons/nft_shield.svg';
+import Icon from 'ui/shared/chakra/Icon';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -29,10 +30,8 @@ const TokenTransferNft = ({ hash, id, className, isDisabled, isLoading, truncati
       w="100%"
       className={ className }
     >
-      <Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 1 } borderRadius="base">
-        <Icon as={ nftPlaceholder } boxSize="30px" color="inherit"/>
-      </Skeleton>
-      <Skeleton isLoaded={ !isLoading } maxW="calc(100% - 34px)">
+      <Icon as={ nftPlaceholder } boxSize="30px" color="inherit" isLoading={ isLoading }/>
+      <Skeleton isLoaded={ !isLoading } maxW="calc(100% - 34px)" ml={ 1 }>
         { truncation === 'constant' ? <HashStringShorten hash={ id }/> : <HashStringShortenDynamic hash={ id } fontWeight={ 500 }/> }
       </Skeleton>
     </Component>

ui/shared/TransactionSnippet.tsx

-import { Icon, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import transactionIcon from 'icons/transactions.svg';
 import Address from 'ui/shared/address/Address';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface Props {
@@ -14,9 +15,7 @@ interface Props {
 const TransactionSnippet = ({ hash, isLoading }: Props) => {
   return (
     <Address maxW="100%">
-      <Skeleton isLoaded={ !isLoading } boxSize={ 6 } borderRadius="base">
-        <Icon as={ transactionIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
-      </Skeleton>
+      <Icon as={ transactionIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') } isLoading={ isLoading }/>
       <AddressLink hash={ hash } fontWeight="600" type="transaction" ml={ 2 } isLoading={ isLoading }/>
       <CopyToClipboard text={ hash } isLoading={ isLoading }/>
     </Address>

ui/shared/chakra/Icon.tsx

+import { Skeleton, Icon as ChakraIcon } from '@chakra-ui/react';
+import type { IconProps, As } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props extends IconProps {
+  isLoading?: boolean;
+  as: As;
+}
+
+const Icon = ({ isLoading, ...props }: Props, ref: React.LegacyRef<SVGSVGElement>) => {
+  return (
+    <Skeleton isLoaded={ !isLoading } boxSize={ props.boxSize } w={ props.w } h={ props.h } borderRadius={ props.borderRadius }>
+      <ChakraIcon { ...props } ref={ ref }/>
+    </Skeleton>
+  );
+};
+
+export default React.memo(React.forwardRef(Icon));

ui/token/TokenTransfer/TokenTransferListItem.tsx

-import { Text, Flex, Icon, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Text, Flex, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -11,6 +11,7 @@ import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -45,14 +46,13 @@ const TokenTransferListItem = ({
     <ListItemMobile rowGap={ 3 } isAnimated>
       <Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
         <Flex>
-          <Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 2 }>
           <Icon
             as={ transactionIcon }
             boxSize="30px"
             color={ iconColor }
+            isLoading={ isLoading }
           />
-          </Skeleton>
-          <Address width="100%">
+          <Address width="100%" ml={ 2 }>
             <AddressLink
               hash={ txHash }
               type="transaction"
@@ -79,9 +79,7 @@ const TokenTransferListItem = ({
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
           <CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
         </Address>
-        <Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
-          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
-        </Skeleton>
+        <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
         <Address width="50%">
           <AddressIcon address={ to } isLoading={ isLoading }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>

ui/token/TokenTransfer/TokenTransferTableItem.tsx

-import { Tr, Td, Icon, Grid, Skeleton, Box } from '@chakra-ui/react';
+import { Tr, Td, Grid, Skeleton, Box } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -9,6 +9,7 @@ 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 Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
@@ -69,9 +70,9 @@ const TokenTransferTableItem = ({
         </Address>
       </Td>
       <Td px={ 0 }>
-        <Skeleton isLoaded={ !isLoading } boxSize={ 6 } my="3px">
-          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
-        </Skeleton>
+        <Box my="3px">
+          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
+        </Box>
       </Td>
       <Td>
         <Address display="inline-flex" maxW="100%" py="3px">

ui/tx/TxDetails.tsx

@@ -3,7 +3,7 @@ import {
   GridItem,
   Text,
   Box,
-  Icon,
+  Icon as ChakraIcon,
   Link,
   Spinner,
   Tag,
@@ -29,6 +29,7 @@ import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -96,14 +97,14 @@ const TxDetails = () => {
   const executionSuccessBadge = toAddress?.is_contract && data.result === 'success' ? (
     <Tooltip label="Contract execution completed">
       <chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
-        <Icon as={ successIcon } boxSize={ 4 } color={ executionSuccessIconColor } cursor="pointer"/>
+        <ChakraIcon as={ successIcon } boxSize={ 4 } color={ executionSuccessIconColor } cursor="pointer"/>
       </chakra.span>
     </Tooltip>
   ) : null;
   const executionFailedBadge = toAddress?.is_contract && Boolean(data.status) && data.result !== 'success' ? (
     <Tooltip label="Error occurred during contract execution">
       <chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
-        <Icon as={ errorIcon } boxSize={ 4 } color="error" cursor="pointer"/>
+        <ChakraIcon as={ errorIcon } boxSize={ 4 } color="error" cursor="pointer"/>
       </chakra.span>
     </Tooltip>
   ) : null;
@@ -182,9 +183,7 @@ const TxDetails = () => {
           hint="Date & time of transaction inclusion, including length of time for confirmation"
           isLoading={ isPlaceholderData }
         >
-          <Skeleton isLoaded={ !isPlaceholderData } boxSize={ 5 }>
-            <Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
-          </Skeleton>
+          <Icon as={ clockIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
           <Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>{ dayjs(data.timestamp).fromNow() }</Skeleton>
           <TextSeparator/>
           <Skeleton isLoaded={ !isPlaceholderData } whiteSpace="normal">{ dayjs(data.timestamp).format('LLLL') }</Skeleton>

ui/tx/internals/TxInternalsListItem.tsx

-import { Flex, Icon, Box, HStack, Skeleton } from '@chakra-ui/react';
+import { Flex, Box, HStack, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -9,6 +9,7 @@ import eastArrowIcon from 'icons/arrows/east.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -33,9 +34,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isLoading={ isLoading }/>
           <CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
         </Address>
-        <Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
-          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
-        </Skeleton>
+        <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
         { toData && (
           <Address width="calc((100% - 48px) / 2)">
             <AddressIcon address={ toData } isLoading={ isLoading }/>

ui/tx/internals/TxInternalsTableItem.tsx

-import { Tr, Td, Icon, Box, Flex, Skeleton } from '@chakra-ui/react';
+import { Tr, Td, Box, Flex, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -9,6 +9,7 @@ import rightArrowIcon from 'icons/arrows/east.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import TxStatus from 'ui/shared/TxStatus';
@@ -42,9 +43,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
         </Address>
       </Td>
       <Td px={ 0 } verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
-          <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500"/>
-        </Skeleton>
+        <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
       </Td>
       <Td verticalAlign="middle">
         { toData && (

ui/txs/TxsListItem.tsx

@@ -2,7 +2,6 @@ import {
   HStack,
   Box,
   Flex,
-  Icon,
   Skeleton,
 } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
@@ -18,6 +17,7 @@ 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 Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -56,14 +56,13 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
       </Flex>
       <Flex justifyContent="space-between" lineHeight="24px" mt={ 3 } alignItems="center">
         <Flex>
-          <Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 2 } borderRadius="base">
           <Icon
             as={ transactionIcon }
             boxSize="30px"
             color="link"
+            isLoading={ isLoading }
           />
-          </Skeleton>
-          <Address width="100%">
+          <Address width="100%" ml={ 2 }>
             <AddressLink
               hash={ tx.hash }
               type="transaction"
@@ -117,13 +116,14 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
         </Address>
         { (isIn || isOut) ?
           <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 } isLoading={ isLoading }/> : (
-            <Skeleton isLoaded={ !isLoading } mx={ 2 } boxSize={ 6 }>
+            <Box mx={ 2 }>
               <Icon
                 as={ rightArrowIcon }
                 boxSize={ 6 }
                 color="gray.500"
+                isLoading={ isLoading }
               />
-            </Skeleton>
+            </Box>
           ) }
         { dataTo ? (
           <Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>

ui/txs/TxsTableItem.tsx

 import {
   Tr,
   Td,
-  Icon,
   VStack,
   Show,
   Hide,
   Flex,
   Skeleton,
+  Box,
 } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import { route } from 'nextjs-routes';
@@ -19,6 +19,7 @@ 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 Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
@@ -133,9 +134,9 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
         <Td px={ 0 }>
           { (isIn || isOut) ?
             <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 } isLoading={ isLoading }/> : (
-              <Skeleton mx="6px" isLoaded={ !isLoading } boxSize={ 6 }>
-                <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500"/>
-              </Skeleton>
+              <Box mx="6px">
+                <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
+              </Box>
             ) }
         </Td>
         <Td>
@@ -146,18 +147,15 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
         <Td colSpan={ 3 }>
           <Flex alignItems="center">
             { (isIn || isOut) ?
-              <InOutTag isIn={ isIn } isOut={ isOut } width="48px" isLoading={ isLoading }/> :
-              (
-                <Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
+              <InOutTag isIn={ isIn } isOut={ isOut } width="48px" isLoading={ isLoading }/> : (
                 <Icon
                   as={ rightArrowIcon }
                   boxSize={ 6 }
                   color="gray.500"
                   transform="rotate(90deg)"
+                  isLoading={ isLoading }
                 />
-                </Skeleton>
-              )
-            }
+              ) }
             <VStack alignItems="start" overflow="hidden" ml={ 1 }>
               { addressFrom }
               { addressTo }

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

-import { HStack, VStack, chakra, Icon, Flex, Skeleton } from '@chakra-ui/react';
+import { HStack, VStack, chakra, Flex, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TWatchlistItem } from 'types/client/account';
@@ -8,6 +8,7 @@ import TokensIcon from 'icons/tokens.svg';
 // import WalletIcon from 'icons/wallet.svg';
 import { nbsp } from 'lib/html-entities';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import Icon from 'ui/shared/chakra/Icon';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import TokenLogo from 'ui/shared/TokenLogo';
 
@@ -40,10 +41,8 @@ const WatchListAddressItem = ({ item, isLoading }: { item: TWatchlistItem; isLoa
         </Skeleton>
       </Flex>
       { item.tokens_count && (
-        <HStack spacing={ 0 } fontSize="sm" pl={ infoItemsPaddingLeft }>
-          <Skeleton isLoaded={ !isLoading } boxSize={ 5 } mr={ 2 } borderRadius="sm">
-            <Icon as={ TokensIcon } boxSize={ 5 }/>
-          </Skeleton>
+        <HStack spacing={ 2 } fontSize="sm" pl={ infoItemsPaddingLeft }>
+          <Icon as={ TokensIcon } boxSize={ 5 } isLoading={ isLoading } borderRadius="sm"/>
           <Skeleton isLoaded={ !isLoading } display="inline-flex">
             <span>{ `Tokens:${ nbsp }` + item.tokens_count }</span>
             { /* api does not provide token prices */ }