Next.js Discord

Discord Forum

loading.tsx only works on direct navigation with dynamic elements in layout.tsx

Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
I'm having trouble getting loading.tsx to work on a direct page view from the browser. Navigating from another page works fine, but navigating directly to the page blocks until the page has fully renendered

I found a similar issue on GitHub

And investigated a little furhter

I noticed that the behaviour works as expected for the official app playground

However, if you remove the <GlobalNav> from the root layout.tsx, the loading demo now fails to work on direct navigation the same as my original issue

More specifically, if you keep GlobalNav in the root layout.tsx, but remove the following section from the GlobalNav component:

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

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

Then the loading.tsx demo also breaks

Am I misunderstanding how the loading.tsx should be working? Why does it break when the dynamic portion of the root layout is removed?

4 Replies

Northeast Congo LionOP
hi, issue author here :FanWave2: i think this is a nextjs bug, it used to work correctly
and i doubt anyone active here, me included, can really help with this
Northeast Congo LionOP
I suspected as much, but was hoping I just misunderstood how it's supposed to work. That's unfortunate

Very odd that it works when rendering the list in the GlobalNav, but breaks without the list

Even weirder is that it works when rendering the list, but if you cut the list down to one item then it breaks as well - two items works

That's probably a decent hint for anyone that understands the internal mechanisms a little deeper, but I have no idea. 😂