[SOLVED] NextJS 15 loading.tsx not showing

NextJS 15 loading.tsx not showing

I am learning NextJS 15 and I have a very simple app just to learn the use of loading.tsx pages, I have a loading.tsx page next to a page.tsx in the src/app folder (as shown in the image below) File structure

The loading.tsx file content is:

export default function Loading() {
  return <p>Loading...</p>;
}

and the page.tsx file content is:

export default async function Home() {
  await new Promise((resolve) => setTimeout(resolve, 4000));

  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
}

also the content of layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

I am using next 15.1.6

The problem is that the loading screen does not show, only the page.tsx content after 4 seconds.

Please help

========= Edit ===========

as Marek said, when I tried to access it on Google Chrome and Microsoft Edge It didn't work, but when I tried it on Brave browser it worked perfectly, I also accessed it from my phone using local network and it worked perfectly, I realy don't know what is happening hope they fix it

Solution

I had the same problem. I tried different ways to fix it and nothing worked. Finally I tried on another browser (brave, I used chrome before) and suddenly everything started working - loading.tsx and suspense components started displaying content correctly while loading. However, I still don't know why it doesn't work on other browsers.