`loading.tsx` doesn't work for directly accessing the page from the browser

[joulev]

Link to the code that reproduces this issue

https://github.com/joulev/debug/tree/nextjs-some-more-bugs

To Reproduce

1. next build
2. next start (or can go here https://debug-git-nextjs-some-more-bugs-joulev.vercel.app/ for a live deployment)
3. Navigate to /, then click the link to go to /beers
4. The loading screen will show correctly
5. Open a new browser tab and navigate to /beers directly
6. The loading screen does not appear

Current vs. Expected behavior

In step 6, the loading screen should be shown. I.e. loading.tsx should work whether the navigation is by next/link from another page, or by a user directly accessing the URL in the browser.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:42:57 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8112
Binaries:
  Node: 20.3.1
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: 8.6.12
Relevant Packages:
  next: 13.5.3-canary.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router

Additional context

No response

[jordanallen-dev]

I'm getting stuck on this too

loading.tsx works as expected in the Playground demo

https://github.com/vercel/app-playground

However, if you remove <GlobalNav> from the root layout.tsx, the loader.tsx demo stops working on direct navigation

I narrowed this down to the following portion of the GlobalNav component:

          {demos.map((section) => {
            return (
              <div key={section.name}>
                <div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-400/80">
                  <div>{section.name}</div>
                </div>

                <div className="space-y-1">
                  {section.items.map((item) => (
                    <GlobalNavItem key={item.slug} item={item} close={close} />
                  ))}
                </div>
              </div>
            );
          })}

If you remove this section, the loading.tsx stops working on direct navigation. If you add it back in (or add it directly to layout.tsx) then it works

[6feferonka9]

I have solved this with dynamic imports. The pages that are usually first hit like /home uses dynamic imports with Skeleton, the web navigation uses loading.tsx

[vitorcont]

Im Stuck on this too, the loading works as expected during the dev build but the production build wont trigger the loading component

[oleh-kolinko]

Same issue on local builds loading works as expected, when deployed to vercel there is no loading