Navigate before the data

Switch to the next screen's layout at once; let the data fill it in.

Guillermo Rauch7 Principles of Rich Web Applications
The basic idea is that the first state of a page "knows" about the layout of the next state, so it can transition to it before there's any data to populate the page with.
rauchg.com · 2014Read article ↗
Guillermo Rauch@rauchg
I know there's a belief that "SPAs are good for apps / dashboards". There's a SaaS app I use which sends me notifications. Each time I click their links I stare at their fancy spinner for multiple seconds. Unlike when someone sends me a e.g.: GitHub issue or PR I see the content instantaneously. Feel the SSR.
Dec 12, 2023View on X ↗
Guillermo Rauch@rauchg
A core design tenet is that once an app is first loaded, subsequent navigations should be “soft” and snappy, to avoid restarting everything.
Feb 28, 2025View on X ↗
Guillermo Rauch@rauchg
1️⃣ Instant navigations are 🔥 The people wanted SPAs, they shall get SPAs. By turning on instant navs (which will soon be default), your agent is basically forced to make things fast.
Aug 3, 2026View on X ↗

Demo 2 is a Google Instant-style search: the first keypress switches layouts.

Click answers, data follows

Click around both sidebars. Watch when anything moves.

Wait for dataBad
Stuck on old page —await data; then navigate
Layout firstGood
Layout — · data —loading.tsx
// app/(dashboard)/deployments/loading.tsx
// Rendered the moment the link is clicked: same layout, no data yet.
export default function Loading() {
  return <DeploymentsTable rows={null} />; // skeleton rows, real header
}

// app/(dashboard)/deployments/page.tsx
export default async function Page() {
  const rows = await getDeployments(); // streams in when ready
  return <DeploymentsTable rows={rows} />;
}

The first key changes layout

Type “cache” in both boxes, then press Enter.

Wait for EnterBad
Nothing typed yet
Adapt on keypressGood
Nothing typed yet

Why it matters, pros and cons

Why it matters

The next layout is known before its data; showing it answers the click.

Pros

  • The click answers in one frame, whatever the latency.
  • Highlight and title confirm where you landed.
  • A second click just cancels the first; nothing is stuck.

Cons

  • A skeleton unlike the real layout shifts twice; match it.
  • Data under ~100ms needs no skeleton; don't flash one.
  • If the click may fail (auth, 404), be ready to go back.