Add loading state between redirects using Link

[treeindev]

Is your feature request related to a problem? Please describe.

A NextJS app that uses "Link" from "@/i18n/routing" to navigate.
Once user clicks on a Link it gets redirected to the target page.
During the transition between pages, a ~0.5s delay can be detected.
This delay occurs right after user clicks on the "a" element and before the new "pathname" gets added to the url.

Describe the solution you'd like

Ability to include delay state between redirects. A context maybe?

Describe alternatives you've considered

Manually check for clicks on "a" element and toggle a loading state like:

useEffect(() => {
    const handleClick = (event: MouseEvent) => {
      const target = event.target as HTMLElement;
      const anchor = target.closest("a"); // Find closest <a> element

      if (!anchor) return;

      const href = anchor.getAttribute("href");
      if (!href || !href.startsWith("/")) return; // Only handle internal links

      const url = new URL(href, window.location.origin);
      const newPathname = url.pathname + url.search;

      // If user clicks on the same page (including query params), do nothing
      const currentPath = pathname + window.location.search;
      if (newPathname === currentPath) return;

      setLoading(true);
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, [pathname]);

However this doesn't feel clean and also it doesn't work on all scenarios, specially if user clicks on link to same page.

[amannn]

Link from next-intl is a tiny wrapper around next/link, so any pattern you can implement with that also works with next-intl. Please see e.g. vercel/next.js#58261

I'll move this to a discussion since it's a usage question.

[treeindev]

Thank you @amannn , I'll check that thread.