NextJS /app router waits for server response before showing 'loading.tsx'

[jake-transcrypts]

Link to the code that reproduces this issue

https://github.com/jake-transcrypts/nextjs-tutorial/

To Reproduce

1. yarn install
2. yarn dev

Current vs. Expected behavior

Assumptions:

• Network is at 3G speed or slower
• All directories have a 'loading.tsx' file

Example scenario

1. User is at: http://localhost:3000/
2. User clicks a link, directing them to http://localhost:3000/login

Current behavior:
The URL sits at http://localhost:3000/ for a few seconds, doing nothing, and showing the user no feedback from their action.

Expected behavior:
As soon as the user clicks the link, the URL should shift, or somehow preemptively show a loader that their requested page change is processing.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Fri Jul  5 18:01:46 PDT 2024; root:xnu-10063.141.1~2/RELEASE_ARM64_T8112
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // There is a newer version (14.2.5) available, upgrade recommended! 
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation, Parallel & Intercepting Routes

Which stage(s) are affected? (Select all that apply)

next dev (local), Vercel (Deployed)

Additional context

Follow-up from This Issue #43548

I'm wondering if there's any additional follow-up from the Next team or workarounds that people have found to resolve this issue. This seems like a fairly simple issue, but it's a profoundly bad experience for users when their actions don't get a reaction from a page, and an annoyance as a developer when I need to add loaders to wait for my loaders.

We were gearing up to launch to production before this issue was noticed, and now we're considering downgrading to /pages in order to circumvent this.

[paqstd-dev]

Same issue #64896. It really looks terrible.

[VinayVidhehi]

Next js is based on file system based routing so since your login folder is inside (auth) folder, change the link (ie href="/login") in the main page.tsx following src/app folder to auth/login (ie href="/(auth)/login").
This should resolve the issue, do let me know if further issue exists

[jake-transcrypts]

@VinayVidhehi Can you expand on this? I don't quite follow your logic here. Not sure if you're suggesting using <Link href="/(auth)/login">Login</Link> or something different

[ztanner]

Hi @jake-transcrypts -- instant loading states are powered by prefetching. In dev mode, Next.js does not automatically prefetch pages, because those pages might not be built yet by Webpack/Turbopack and we don't want to initiate a bunch of page compilations which could cause your dev server to slow down.

If you build your app and run it with next start, you'll see that there's no loading state at all: it transitions to the login page instantly. This is because there's nothing dynamic on this page: Next.js was able to prerender it during next build and so we can instantly navigate to it.

If your login page opted into dynamic rendering, you'd see the behavior you're expecting during next start:

CleanShot.2024-08-10.at.09.33.16.mp4

Let us know if you have any further questions about this behavior!