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
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
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.
I had the same problem, and I tried temporarily disabling my Kaspersky, and it worked fine. Maybe it was caused by the antivirus app web protechtion.
I'd recommend a start over again.
I tried installing next.js latest version
npx create-next-app@latest
Then I checked the documentation about the loading.tsx. Seems like your implementation is correct. I added the same code structure as well.
I added the same layout function as well
When I refresh the page. Loading... state appear. Looks like there is nothing wrong with your code.
The issue is that loading.tsx only works for route segments, and since your page.tsx is directly inside src/app/, Next.js doesn’t recognize it as a separate segment. To fix this, just move both page.tsx and loading.tsx into a subfolder like src/app/home/. That way, Next.js will show the loading screen while the page is loading.
I faced this issue too, but in the end, I figured out that there was actually no issue and the reason the loading was not displayed was that there is no slow content on my pages. By inserting the code below into one of the pages I had just made, the loading appeared.
export default async function Page() {
await new Promise((resolve) => setTimeout(resolve, 2000));
return <div>Invoices Page</div>;
}
SOLUTION: Increase returned content of loading.tsx.
Problem is that some browsers have minimal content size for which they render it.
If content is smaller then minimum, it won't be rendered:
https://github.com/vercel/next.js/issues/48663#issuecomment-1532250129
https://www.reddit.com/r/nextjs/comments/1f8cm4k/suspense_fallback_for_server_component_does_not/
Suspense fallback SSR NextJs 14 at first page loading not working on Safari (on Chrome works)
https://bugs.webkit.org/show_bug.cgi?id=252413
Instead of just returning spinner, return "Page is loading" or something even longer.