fix: update widget loading state detection (#3253)

* update loading state detection

* create custom hook for amount detection

src/lib/components/Swap/Toolbar/index.tsx

 import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
-import { useSwapInfo } from 'lib/hooks/swap'
+import { useIsAmountPopulated, useSwapInfo } from 'lib/hooks/swap'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { largeIconCss } from 'lib/icons'
 import { Field } from 'lib/state/swap'
@@ -29,6 +29,8 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
     [state, trade?.swaps]
   )
 
+  const isAmountPopulated = useIsAmountPopulated()
+
   const caption = useMemo(() => {
     if (disabled) {
       return <Caption.ConnectWallet />
@@ -42,11 +44,10 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
       return <Caption.InsufficientBalance currency={trade.inputAmount.currency} />
     }
 
-    if (inputCurrency && outputCurrency) {
+    if (inputCurrency && outputCurrency && isAmountPopulated) {
       if (!trade || routeIsLoading) {
         return <Caption.LoadingTrade />
       }
-
       if (!routeFound) {
         return <Caption.InsufficientLiquidity />
       }
@@ -56,7 +57,7 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
     }
 
     return <Caption.Empty />
-  }, [balance, chainId, disabled, inputCurrency, outputCurrency, routeFound, routeIsLoading, trade])
+  }, [balance, chainId, disabled, inputCurrency, isAmountPopulated, outputCurrency, routeFound, routeIsLoading, trade])
 
   return (
     <>

src/lib/hooks/swap/index.ts

@@ -72,3 +72,8 @@ export function useSwapAmount(field: Field): [string | undefined, (amount: strin
   )
   return [value, updateAmount]
 }
+
+// check if any amount has been entered by user
+export function useIsAmountPopulated() {
+  return Boolean(useAtomValue(amountAtom))
+}