Commit Graph

2 Commits

Author SHA1 Message Date
Janka Uryga cd5d0058ad test: attempt to unflake useLinkStatus interrupted navigation test (#77969)
This test flaked for me here:
https://github.com/vercel/next.js/actions/runs/14353556171/job/40239845657#step:33:678

I suspect this is because \[the assertion that the pending state should
disappear\] sometimes runs too soon. I made it wait until the
side-effect of clicking the "debug mode" button becomes visible before
checking if the pending state is gone. If this fix doesn't improve the
situation, it indicates a bug in `useLinkStatus`, because the pending
state is still hanging around for some reason.

(i chose not to just wrap the assertion in a `retry()`, because we want
to ensure that the indicator disappears immediately, not at some
unspecified point in the future)
2025-04-09 13:16:12 +00:00
Jude Gao ccd76c961a feat: useLinkStatus (#77300)
# `useLinkStatus` Hook

The `useLinkStatus` hook is primarily useful when:

- Links have `prefetch={false}` set
- Navigation occurs before prefetching has completed
- When React decides to [skip the loading
state](https://react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators)
and https://github.com/vercel/next.js/issues/69625

It provides loading state feedback during these navigation transitions,
preventing pages from appearing "frozen" while new content loads.

## Usage

`useLinkStatus` can be called from any descendant component of `Link`
and it returns `{ pending: true }` before history has updated. After the
URL updates, it returns `{ pending: false }`.

```jsx
// When prefetching is disabled
<Link href="/dashboard/reports" prefetch={false}>
  Reports <LoadingIndicator />
</Link>

function LoadingIndicator() {
  const { pending } = useLinkStatus();
  return pending ? <Spinner /> : null;
}
```

## Notes

- If the link has been prefetched, pending change will be skipped and
remain `{ pending: false }`.
- If `useLinkStatus` is not under any `Link`, it will always return `{
pending: false }`.
- `useLinkStatus` currently does not support Pages Router, so it will
always return `{ pending: false }` in Pages Router.
- When you click multiple links in a short period, only the last link's
pending state is shown

---------

Co-authored-by: Andrew Clark <git@andrewclark.io>
2025-03-24 15:50:36 -07:00