display token approval message on loading (#1280)

src/components/@shared/TokenApproval/index.tsx

@@ -11,7 +11,8 @@ export default function TokenApproval({
   amount,
   tokenAddress,
   tokenSymbol,
-  setSubmitting
+  setSubmitting,
+  setIsTokenApproved
 }: {
   actionButton: JSX.Element
   disabled: boolean
@@ -19,6 +20,7 @@ export default function TokenApproval({
   tokenAddress: string
   tokenSymbol: string
   setSubmitting?: (isSubmitting: boolean) => void
+  setIsTokenApproved: (isApproved: boolean) => void
 }): ReactElement {
   const { asset, isAssetNetwork } = useAsset()
   const [tokenApproved, setTokenApproved] = useState(false)
@@ -44,6 +46,9 @@ export default function TokenApproval({
       setTokenApproved(
         new Decimal(allowanceValue).greaterThanOrEqualTo(new Decimal(amount))
       )
+    setIsTokenApproved(
+      new Decimal(allowanceValue).greaterThanOrEqualTo(new Decimal(amount))
+    )
   }, [web3, tokenAddress, spender, accountId, amount, isAssetNetwork])
 
   useEffect(() => {

src/components/Asset/AssetActions/Pool/Actions.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import Loader from '@shared/atoms/Loader'
 import Button from '@shared/atoms/Button'
 import styles from './Actions.module.css'
@@ -36,6 +36,7 @@ export default function Actions({
   setSubmitting?: (isSubmitting: boolean) => void
 }): ReactElement {
   const { networkId } = useWeb3()
+  const [isTokenApproved, setIsTokenApproved] = useState(false)
 
   const actionButton = (
     <Button
@@ -64,11 +65,18 @@ export default function Actions({
     <>
       <div className={styles.actions}>
         {isLoading ? (
-          <Loader message={loaderMessage} />
+          <Loader
+            message={
+              isTokenApproved || actionName === 'Remove'
+                ? loaderMessage
+                : `Approving ${tokenSymbol}...`
+            }
+          />
         ) : actionName === 'Supply' || actionName === 'Swap' ? (
           <TokenApproval
             actionButton={actionButton}
             amount={slippage ? applySlippage(amount) : amount}
+            setIsTokenApproved={setIsTokenApproved}
             tokenAddress={tokenAddress}
             tokenSymbol={tokenSymbol}
             disabled={isDisabled}