loading.tsx only works on direct navigation with dynamic elements in layout.tsx
Unanswered
Northeast Congo Lion posted this in #help-forum
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 https://github.com/vercel/next.js/issues/55864
And investigated a little furhter
I noticed that the behaviour works as expected for the official app playground
https://github.com/vercel/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:
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?
I found a similar issue on GitHub https://github.com/vercel/next.js/issues/55864
And investigated a little furhter
I noticed that the behaviour works as expected for the official app playground
https://github.com/vercel/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:
{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>
);
})}
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
Bump
hi, issue author here 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. 😂
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. 😂