fix loader

ui/address/tokenSelect/TokenSelect.tsx

@@ -62,7 +62,20 @@ const TokenSelect = () => {
     handler: handleTokenBalanceMessage,
   });
 
-  const button = (
+  if (isLoading) {
+    return <Skeleton h={ 8 } w="160px"/>;
+  }
+
+  if (isError || data.length === 0) {
+    return <Box py="6px">0</Box>;
+  }
+
+  return (
+    <>
+      { isMobile ?
+        <TokenSelectMobile data={ data } isLoading={ balancesIsFetching === 1 }/> :
+        <TokenSelectDesktop data={ data } isLoading={ balancesIsFetching === 1 }/>
+      }
       <Tooltip label="Show all tokens">
         <IconButton
           aria-label="Show all tokens"
@@ -74,25 +87,6 @@ const TokenSelect = () => {
           icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
         />
       </Tooltip>
-  );
-
-  if (isLoading || balancesIsFetching === 1) {
-    return (
-      <>
-        <Skeleton h={ 8 } w="160px"/>
-        { data && data.length > 0 && button }
-      </>
-    );
-  }
-
-  if (isError || data.length === 0) {
-    return <Box py="6px">0</Box>;
-  }
-
-  return (
-    <>
-      { isMobile ? <TokenSelectMobile data={ data }/> : <TokenSelectDesktop data={ data }/> }
-      { button }
     </>
   );
 };

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,20 +10,30 @@ 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 (
+    <Box position="relative">
       <Button
         ref={ ref }
         size="sm"
         variant="outline"
         colorScheme="gray"
-      onClick={ onClick }
+        onClick={ handleClick }
         aria-label="Token select"
       >
         <Icon as={ tokensIcon } boxSize={ 4 } mr={ 2 }/>
@@ -31,6 +41,8 @@ const TokenSelectButton = ({ isOpen, onClick, data }: Props, ref: React.Forwarde
         <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/>