Clicking the lookup icon, it will keep spining

[penn201500]

``

steps:

1. Open http://127.0.0.1:3000, then input f.com and click the lookup icon with the mouse. I got http://127.0.0.1:3000/_next/data/development/f.com.json?query=f.com with a response of 200 OK; everything works as expected.
   2. After step 1, I click the lookup icon again and still get http://127.0.0.1:3000/_next/data/development/f.com.json?query=f.com with a response of 200 OK, but the spinning icon continues to spin.
   3. Refresh the page; the icon will change from spinning to the original icon again, which is okay.
   4. Press the enter key, get http://127.0.0.1:3000/_next/static/development/_devMiddlewareManifest.json with a response of 200 OK, and the lookup icon is not spinning; it’s working as expected.

I've tried to update the state management, but failed:

const goStage = async (target: string) => {
  setLoading(true);
  try {
    await router.push(toSearchURI(target));
  } catch (error) {
    console.error('Error during navigation:', error);
  } finally {
    setLoading(false);
  }
};

useEffect(() => {
  const handleRouteChange = () => {
    setLoading(false);
  };

  router.events.on('routeChangeComplete', handleRouteChange);
  return () => {
    router.events.off('routeChangeComplete', handleRouteChange);
  };
}, [router.events]);

<Input
  className={`w-full text-center`}
  placeholder={`domain name (e.g. google.com)`}
  value={domain}
  onChange={(e) => setDomain(e.target.value)}
  onKeyDown={(e) => {
    if (isEnter(e)) {
      goStage(domain);
    }
  }}
/>
<Button
  size={`icon`}
  variant={`outline`}
  className={`absolute right-0 rounded-l-none`}
  onClick={() => goStage(domain)}
>
  {loading ? (
    <Loader2 className={`w-4 h-4 animate-spin`} />
  ) : (
    <Send className={`w-4 h-4`} />
  )}
</Button>

[zmh-program]

fixed