cover static elements with skeleton

ui/shared/TokenTransfer/TokenTransferNft.tsx

@@ -17,7 +17,7 @@ interface Props {
 }
 
 const TokenTransferNft = ({ hash, id, className, isDisabled, isLoading, truncation = 'dynamic' }: Props) => {
-  const Component = isDisabled ? Box : LinkInternal;
+  const Component = isDisabled || isLoading ? Box : LinkInternal;
 
   return (
     <Component
@@ -29,7 +29,9 @@ const TokenTransferNft = ({ hash, id, className, isDisabled, isLoading, truncati
       w="100%"
       className={ className }
     >
-      <Icon as={ nftPlaceholder } boxSize="30px" mr={ 1 } color="inherit"/>
+      <Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 1 } borderRadius="base">
+        <Icon as={ nftPlaceholder } boxSize="30px" color="inherit"/>
+      </Skeleton>
       <Skeleton isLoaded={ !isLoading } maxW="calc(100% - 34px)">
         { truncation === 'constant' ? <HashStringShorten hash={ id }/> : <HashStringShortenDynamic hash={ id } fontWeight={ 500 }/> }
       </Skeleton>

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -43,12 +43,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"
-            mr={ 2 }
               color={ iconColor }
             />
+          </Skeleton>
           <Address width="100%">
             <AddressLink
               hash={ txHash }
@@ -73,7 +74,9 @@ const TokenTransferListItem = ({
           <AddressIcon address={ from } isLoading={ isLoading }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
         </Address>
+        <Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
+        </Skeleton>
         <Address width="50%">
           <AddressIcon address={ to } isLoading={ isLoading }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
@@ -81,7 +84,9 @@ const TokenTransferListItem = ({
       </Flex>
       { value && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
         <Flex columnGap={ 2 } w="100%">
-          <Text fontWeight={ 500 } flexShrink={ 0 }>Value</Text>
+          <Skeleton isLoaded={ !isLoading } flexShrink={ 0 } fontWeight={ 500 }>
+            Value
+          </Skeleton>
           <Skeleton isLoaded={ !isLoading } variant="secondary">
             { value }
           </Skeleton>

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -75,7 +75,9 @@ const TokenTransferTableItem = ({
         </Address>
       </Td>
       <Td px={ 0 }>
-        <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" my="3px"/>
+        <Skeleton isLoaded={ !isLoading } boxSize={ 6 } my="3px">
+          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
+        </Skeleton>
       </Td>
       <Td>
         <Address display="inline-flex" maxW="100%" py="3px">