fix: approval pending ux (#4693)

* fix: approval button colors

* feat: show spinner while pending wallet interaction

* fix: constant allow button height

src/components/Popover/index.tsx

@@ -16,6 +16,7 @@ const PopoverContainer = styled.div<{ show: boolean }>`
 
 const ReferenceElement = styled.div`
   display: inline-block;
+  height: inherit;
 `
 
 const Arrow = styled.div`

src/pages/Swap/index.tsx

@@ -303,7 +303,10 @@ export default function Swap() {
     gatherPermitSignature,
   } = useERC20PermitFromTrade(trade, allowedSlippage, transactionDeadline)
 
+  const [approvalPending, setApprovalPending] = useState<boolean>(false)
   const handleApprove = useCallback(async () => {
+    setApprovalPending(true)
+    try {
       if (signatureState === UseERC20PermitState.NOT_SIGNED && gatherPermitSignature) {
         try {
           await gatherPermitSignature()
@@ -322,6 +325,9 @@ export default function Swap() {
           label: [TRADE_STRING, trade?.inputAmount?.currency.symbol].join('/'),
         })
       }
+    } finally {
+      setApprovalPending(false)
+    }
   }, [signatureState, gatherPermitSignature, approveCallback, trade?.inputAmount?.currency.symbol])
 
   // check if user has gone through approval process, used to show two step buttons, reset on token change
@@ -696,7 +702,7 @@ export default function Swap() {
                               approvalState === ApprovalState.APPROVED || signatureState === UseERC20PermitState.SIGNED
                             }
                           >
-                            <AutoRow justify="space-between" style={{ flexWrap: 'nowrap' }}>
+                            <AutoRow justify="space-between" style={{ flexWrap: 'nowrap' }} height="20px">
                               <span style={{ display: 'flex', alignItems: 'center' }}>
                                 {/* we need to shorten this string on mobile */}
                                 {approvalState === ApprovalState.APPROVED ||
@@ -708,8 +714,8 @@ export default function Swap() {
                                   </Trans>
                                 )}
                               </span>
-                              {approvalState === ApprovalState.PENDING ? (
-                                <Loader stroke="white" />
+                              {approvalPending || approvalState === ApprovalState.PENDING ? (
+                                <Loader stroke={theme.white} />
                               ) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||
                                 signatureState === UseERC20PermitState.SIGNED ? (
                                 <CheckCircle size="20" color={theme.deprecated_green1} />
@@ -722,7 +728,7 @@ export default function Swap() {
                                     </Trans>
                                   }
                                 >
-                                  <HelpCircle size="20" color={'deprecated_white'} style={{ marginLeft: '8px' }} />
+                                  <HelpCircle size="20" color={theme.deprecated_white} style={{ marginLeft: '8px' }} />
                                 </MouseoverTooltip>
                               )}
                             </AutoRow>