Fix cursor stealing & display loading for AddressInput

packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { blo } from "blo";
-import { useDebounce } from "usehooks-ts";
+import { useDebounceValue } from "usehooks-ts";
 import { Address, isAddress } from "viem";
 import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
 import { CommonInputProps, InputBase, isENS } from "~~/components/scaffold-eth";
@@ -11,22 +11,32 @@ import { CommonInputProps, InputBase, isENS } from "~~/components/scaffold-eth";
 export const AddressInput = ({ value, name, placeholder, onChange, disabled }: CommonInputProps<Address | string>) => {
   // Debounce the input to keep clean RPC calls when resolving ENS names
   // If the input is an address, we don't need to debounce it
-  const _debouncedValue = useDebounce(value, 500);
+  const [_debouncedValue] = useDebounceValue(value, 900);
   const debouncedValue = isAddress(value) ? value : _debouncedValue;
   const isDebouncedValueLive = debouncedValue === value;
 
   // If the user changes the input after an ENS name is already resolved, we want to remove the stale result
   const settledValue = isDebouncedValueLive ? debouncedValue : undefined;
 
-  const { data: ensAddress, isLoading: isEnsAddressLoading } = useEnsAddress({
+  const {
+    data: ensAddress,
+    isLoading: isEnsAddressLoading,
+    isError: isEnsAddressError,
+    isSuccess: isEnsAddressSuccess,
+  } = useEnsAddress({
     name: settledValue,
-    enabled: isENS(debouncedValue),
+    enabled: isDebouncedValueLive && isENS(debouncedValue),
     chainId: 1,
     cacheTime: 30_000,
   });
 
   const [enteredEnsName, setEnteredEnsName] = useState<string>();
-  const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({
+  const {
+    data: ensName,
+    isLoading: isEnsNameLoading,
+    isError: isEnsNameError,
+    isSuccess: isEnsNameSuccess,
+  } = useEnsName({
     address: settledValue as Address,
     enabled: isAddress(debouncedValue),
     chainId: 1,
@@ -57,6 +67,14 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     [onChange],
   );
 
+  const reFocus =
+    isEnsAddressError ||
+    isEnsNameError ||
+    isEnsNameSuccess ||
+    isEnsAddressSuccess ||
+    ensName === null ||
+    ensAddress === null;
+
   return (
     <InputBase<Address>
       name={name}
@@ -65,8 +83,9 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
       value={value as Address}
       onChange={handleChange}
       disabled={isEnsAddressLoading || isEnsNameLoading || disabled}
+      reFocus={reFocus}
       prefix={
-        ensName && (
+        ensName ? (
           <div className="flex bg-base-300 rounded-l-full items-center">
             {ensAvatar ? (
               <span className="w-[35px]">
@@ -78,6 +97,18 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
             ) : null}
             <span className="text-accent px-2">{enteredEnsName ?? ensName}</span>
           </div>
+        ) : (
+          (isEnsAddressLoading || isEnsNameLoading) && (
+            <div className="flex bg-base-300 rounded-l-full items-center">
+              <div className="w-[35px]">
+                <div className="h-[35px] w-[35px] rounded-full bg-gray-500 animate-pulse"></div>
+              </div>
+              <div className="text-accent px-2 flex items-end space-x-1">
+                <span>Resolving</span>
+                <span className="loading loading-dots loading-xs"></span>
+              </div>
+            </div>
+          )
         )
       }
       suffix={

packages/nextjs/components/scaffold-eth/Input/InputBase.tsx

@@ -1,10 +1,11 @@
-import { ChangeEvent, ReactNode, useCallback } from "react";
+import { ChangeEvent, ReactNode, useCallback, useEffect, useRef } from "react";
 import { CommonInputProps } from "~~/components/scaffold-eth";
 
 type InputBaseProps<T> = CommonInputProps<T> & {
   error?: boolean;
   prefix?: ReactNode;
   suffix?: ReactNode;
+  reFocus?: boolean;
 };
 
 export const InputBase = <T extends { toString: () => string } | undefined = string>({
@@ -16,7 +17,10 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
   disabled,
   prefix,
   suffix,
+  reFocus,
 }: InputBaseProps<T>) => {
+  const inputReft = useRef<HTMLInputElement>(null);
+
   let modifier = "";
   if (error) {
     modifier = "border-error";
@@ -31,6 +35,10 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
     [onChange],
   );
 
+  useEffect(() => {
+    if (reFocus) inputReft.current?.focus();
+  }, [reFocus]);
+
   return (
     <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
       {prefix}
@@ -42,6 +50,7 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
         onChange={handleChange}
         disabled={disabled}
         autoComplete="off"
+        ref={inputReft}
       />
       {suffix}
     </div>