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:

          {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?