fix loader

ui/address/tokenSelect/TokenSelect.tsx

@@ -62,27 +62,8 @@ const TokenSelect = () => {
     handler: handleTokenBalanceMessage,
   });
 
-  const button = (
-    <Tooltip label="Show all tokens">
-      <IconButton
-        aria-label="Show all tokens"
-        variant="outline"
-        size="sm"
-        pl="6px"
-        pr="6px"
-        ml={ 3 }
-        icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
-      />
-    </Tooltip>
-  );
-
-  if (isLoading || balancesIsFetching === 1) {
-    return (
-      <>
-        <Skeleton h={ 8 } w="160px"/>
-        { data && data.length > 0 && button }
-      </>
-    );
+  if (isLoading) {
+    return <Skeleton h={ 8 } w="160px"/>;
   }
 
   if (isError || data.length === 0) {
@@ -91,8 +72,21 @@ const TokenSelect = () => {
 
   return (
     <>
-      { isMobile ? <TokenSelectMobile data={ data }/> : <TokenSelectDesktop data={ data }/> }
-      { button }
+      { isMobile ?
+        <TokenSelectMobile data={ data } isLoading={ balancesIsFetching === 1 }/> :
+        <TokenSelectDesktop data={ data } isLoading={ balancesIsFetching === 1 }/>
+      }
+      <Tooltip label="Show all tokens">
+        <IconButton
+          aria-label="Show all tokens"
+          variant="outline"
+          size="sm"
+          pl="6px"
+          pr="6px"
+          ml={ 3 }
+          icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
+        />
+      </Tooltip>
     </>
   );
 };

ui/address/tokenSelect/TokenSelectButton.tsx

-import { Button, Icon, Text } from '@chakra-ui/react';
+import { Box, Button, Icon, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -10,27 +10,39 @@ import type { EnhancedData } from './utils';
 
 interface Props {
   isOpen: boolean;
+  isLoading: boolean;
   onClick: () => void;
   data: Array<EnhancedData>;
 }
 
-const TokenSelectButton = ({ isOpen, onClick, data }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const totalBn = data.reduce((result, item) => !item.usd ? result : result.plus(BigNumber(item.usd)), ZERO);
+  const skeletonBgColor = useColorModeValue('white', 'black');
+
+  const handleClick = React.useCallback(() => {
+    if (isLoading && !isOpen) {
+      return;
+    }
+    onClick();
+  }, [ isLoading, isOpen, onClick ]);
 
   return (
-    <Button
-      ref={ ref }
-      size="sm"
-      variant="outline"
-      colorScheme="gray"
-      onClick={ onClick }
-      aria-label="Token select"
-    >
-      <Icon as={ tokensIcon } boxSize={ 4 } mr={ 2 }/>
-      <Text fontWeight={ 600 }>{ data.length }</Text>
-      <Text whiteSpace="pre" variant="secondary" fontWeight={ 400 }> (${ totalBn.toFormat(2) })</Text>
-      <Icon as={ arrowIcon } transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 3 }/>
-    </Button>
+    <Box position="relative">
+      <Button
+        ref={ ref }
+        size="sm"
+        variant="outline"
+        colorScheme="gray"
+        onClick={ handleClick }
+        aria-label="Token select"
+      >
+        <Icon as={ tokensIcon } boxSize={ 4 } mr={ 2 }/>
+        <Text fontWeight={ 600 }>{ data.length }</Text>
+        <Text whiteSpace="pre" variant="secondary" fontWeight={ 400 }> (${ totalBn.toFormat(2) })</Text>
+        <Icon as={ arrowIcon } transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 3 }/>
+      </Button>
+      { isLoading && !isOpen && <Skeleton h="100%" w="100%" position="absolute" top={ 0 } left={ 0 } bgColor={ skeletonBgColor }/> }
+    </Box>
   );
 };
 

ui/address/tokenSelect/TokenSelectDesktop.tsx

@@ -9,9 +9,10 @@ import useTokenSelect from './useTokenSelect';
 
 interface Props {
   data: Array<AddressTokenBalance>;
+  isLoading: boolean;
 }
 
-const TokenSelectDesktop = ({ data }: Props) => {
+const TokenSelectDesktop = ({ data, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
   const bgColor = useColorModeValue('white', 'gray.900');
@@ -21,7 +22,7 @@ const TokenSelectDesktop = ({ data }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.modifiedData }/>
+        <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.modifiedData } isLoading={ isLoading }/>
       </PopoverTrigger>
       <PopoverContent w="355px" maxH="450px" overflowY="scroll">
         <PopoverBody px={ 4 } py={ 6 } bgColor={ bgColor } boxShadow="2xl" >

ui/address/tokenSelect/TokenSelectMobile.tsx

@@ -9,15 +9,16 @@ import useTokenSelect from './useTokenSelect';
 
 interface Props {
   data: Array<AddressTokenBalance>;
+  isLoading: boolean;
 }
 
-const TokenSelectMobile = ({ data }: Props) => {
+const TokenSelectMobile = ({ data, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
   const result = useTokenSelect(data);
 
   return (
     <>
-      <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.modifiedData }/>
+      <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.modifiedData } isLoading={ isLoading }/>
       <Modal isOpen={ isOpen } onClose={ onClose } size="full">
         <ModalContent>
           <ModalCloseButton/>