fix: async validation loader in AddressInput (#1464)

* fix: async validation loader in AddressInput

* fix: condition and add testcase

src/components/common/AddressInput/index.test.tsx

@@ -124,6 +124,31 @@ describe('AddressInput tests', () => {
     await waitFor(() => expect(utils.getByLabelText(`${TEST_ADDRESS_B} is wrong`, { exact: false })).toBeDefined())
   })
 
+  it('should show a spinner when validation is in progress', async () => {
+    const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+    const { input, utils } = setup('', async (val) => {
+      await sleep(2000)
+      return `${val} is wrong`
+    })
+
+    act(() => {
+      fireEvent.change(input, { target: { value: `gor:${TEST_ADDRESS_A}` } })
+      jest.advanceTimersByTime(1000)
+    })
+
+    await waitFor(() => {
+      expect(utils.getByRole('progressbar')).toBeDefined()
+      expect(utils.queryByLabelText(`${TEST_ADDRESS_A} is wrong`, { exact: false })).toBeNull()
+    })
+
+    act(() => {
+      jest.advanceTimersByTime(1000)
+    })
+
+    await waitFor(() => expect(utils.getByLabelText(`${TEST_ADDRESS_A} is wrong`, { exact: false })).toBeDefined())
+  })
+
   it('should resolve ENS names', async () => {
     const { input } = setup('')
 

src/components/common/AddressInput/index.tsx

@@ -18,7 +18,7 @@ const AddressInput = ({ name, validate, required = true, deps, ...props }: Addre
     register,
     setValue,
     control,
-    formState: { errors },
+    formState: { errors, isValidating },
     trigger,
   } = useFormContext()
   const currentChain = useCurrentChain()
@@ -72,7 +72,7 @@ const AddressInput = ({ name, validate, required = true, deps, ...props }: Addre
               <InputAdornment position="end">{currentShortName}:</InputAdornment>
             ),
 
-            endAdornment: resolving && (
+            endAdornment: (resolving || isValidating) && (
               <InputAdornment position="end">
                 <CircularProgress size={20} />
               </InputAdornment>