Accessing isPending in next/link during the Concurrent navigation

[himself65]

Goals

1. Allow the developer side can better access the navigation status in App Dir mode

Non-Goals

No response

Background

llamaindex is building a giant project using Next.js 14 with app dir, and the project is like this:

And its file structure

/layout.js
/link1/page.js
/link2/page.js
/link3/page.js

In layout.js

export default function Layout() {
  return (
    // ...
    <Selections/>
    //...
  )
}
// selection.js
"use client"
export function Selections() {
  // can we add a loading spinner when switching routes?
  return <>OPTIONS.map(option => <Link href={option} />)</>
}

The link component will take a few seconds if each page is big, and I want to add a loading spinner beside the links like this:

I can only add loading.js on the same level, but this is not a good approach and cannot control the granularity UI

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Proposal

1. Expose a way to let the user side control startTransition and isPending, like adding props.startTransition API or similar.

next.js/packages/next/src/client/link.tsx

Line 238 in 498f342

React.startTransition(navigate)

For example

React.startTransition(() => {
  if (props.startTransition) {
	return props.startTransition(navigate)
  }
  return navigate()
}) 

This is correct because it is a sync function.

2. Global hook like useRouterPending or something

But this would violate the rule of React, I think?

3. Add useLinkStatus hooks like react-dom/client

export default Page() {
  const status = useLinkStatus('/') // 'loading' | 'prefetched' | 'idle' ...
}

Workaround

const pathname = usePathname();
const [targetPathname, setTargetPathname] = useState(() => pathname)
const isPending = targetPathname !== pathname

<Link
  href={'/xxxx'}
  onClick={useCallback((event: MouseEvent<HTMLAnchorElement>) => {
    setTargetPathname(new URL(event.currentTarget.href).pathname)
  }, [pathname])}
>

[SukkaW]

I have faced the same problem when building my personal website in Next.js App Router (even before Next.js 13 was released). I was trying to implement the similar navigating... animation on the link as well.

And here I propose another solution:

const [isPending, aProps] = useLink('/', { onClick() { /** extra on click handler should be put here */ } });

<a className={isPending && 'navigating'} {...aProps} />

---

Update

For those who are interested, I've created a user-land useNextLink as I've proposed:

https://foxact.skk.moe/use-next-link

import { unstable_useNextLink as useNextLink } from 'foxact/use-next-link';
 
export default function Page() {
  const [isPending, linkProps] = useNextLink('/about');
 
  return (
    <div>
      {isPending && <div>Navigating...</div>}
      <a className="link" {...linkProps}>
        About
      </a>
    </div>
  );
}

[himself65]

This is a good idea, but I want to use next/link features like prefetching

[SukkaW]

This is a good idea, but I want to use next/link features like prefetching

foxact/use-next-link implements prefetching.