How do you show navigation loading feedback with useLinkStatus in Next.js?

Q: How do you show navigation loading feedback with useLinkStatus in Next.js?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against real output from a build, a running server or a real Chromium browser. ## 1. Why This Even Matters — A Story First You press the call button for a lift. If the button lights up, you wait calmly. If it does not, you press it five more times and start wondering whether to take the stairs. The lift is exactly as fast either way; the light only tells you your press was received. A Next.js link to a slow, dynamic page behaves like the unlit button. The router has started fetching, but the old page stays on screen and the URL does not change until the server answers. `useLinkStatus` is the light on th

The problem

Question presented to candidate: "Users click a link in our sidebar and nothing seems to happen for a second before the next page appears. How would you give them feedback in Next.js, and where does useLinkStatus fit?"

What a strong answer should cover:

Why the delay exists: the destination is dynamic, not prefetched, and has no loading.js, so the router waits for the server before changing the URL.
useLinkStatus() from next/link returns { pending } for the nearest parent <Link>; it must be called in a Client Component rendered inside that Link.
pending is true from the click until the history updates; it is the inline, per-link signal, while loading.js is the route-level fallback.
Fix the cause first: a loading.js file or prefetching makes the transition instant; useLinkStatus is the patch for the remaining slow cases.
UX details: a fixed-size, always-rendered hint (no layout shift) and a short animation delay so fast navigations do not flash.

Clarifying questions expected:

"Is the slow route dynamic, and does it have a loading.js?" — that decides whether a route fallback already solves it.
"Is prefetching disabled on these links?" — useLinkStatus matters most with prefetch={false}.

Code / implementation expected: Yes — a small Client Component using useLinkStatus inside a <Link>, plus the CSS idea for a delayed fade-in.

nextjs
navigation
loading-ui
hooks

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against real output from a build, a running server or a real Chromium browser.

1. Why This Even Matters — A Story First

You press the call button for a lift. If the button lights up, you wait calmly. If it does not, you press it five more times and start wondering whether to take the stairs. The lift is exactly as fast either way; the light only tells you your press was received.

A Next.js link to a slow, dynamic page behaves like the unlit button. The router has started fetching, but the old page stay

The solution is hidden so you can try first

8 min read · 8 sections

Read the code

A per-link pending hint

// app/nav/hint.tsx
"use client";
import { useLinkStatus } from "next/link";

export default function Hint({ id }: { id: string }) {
  const { pending } = useLinkStatus();
  // Always rendered and fixed size, so toggling it never shifts layout.
  return <span data-hint={id} data-pending={String(pending)} aria-hidden className={pending ? "link-hint is-pending" : "link-hint"} />;
}

// app/nav/layout.tsx
import "./hint.css";
import Link from "next/link";
import Hint from "./hint";

export default function NavLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>
        <Link href="/nav/slow" prefetch={false} id="to-slow">Slow (no loading.js) <Hint id="slow" /></Link>{" | "}
        <Link href="/nav/with-loading" prefetch={false} id="to-loading">Slow with loading.js <Hint id="loading" /></Link>{" | "}
        <Link href="/nav/fast" id="to-fast">Static, prefetched <Hint id="fast" /></Link>
      </nav>
      {children}
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.