loading.js file not showing up.
Answered
Hairy Woodpecker posted this in #help-forum
Hairy WoodpeckerOP
I have a simple loading.js file in the /app directory. It's right next to page.js. But it never shows up. Not even when I throttle. I even added a mock api fetch which took 5 seconds to return and render the data on screen.
This is my loading.js file:
I'm running next: "14.1.4", please help
This is my loading.js file:
export default function Loading() {
return <div>Loading...</div>;
}I'm running next: "14.1.4", please help
Answered by American Shorthair
The loading.js file will only be recognised by Next.js if its a server rendered page. If the page that you are intending for Next.js to show the loading.js for is client rendered with the 'use client' directive it will not work.
Also try making it a loading.jsx file, you're going to be rendering jsx in the anyway. Hope that helps.
Also try making it a loading.jsx file, you're going to be rendering jsx in the anyway. Hope that helps.
2 Replies
American Shorthair
The loading.js file will only be recognised by Next.js if its a server rendered page. If the page that you are intending for Next.js to show the loading.js for is client rendered with the 'use client' directive it will not work.
Also try making it a loading.jsx file, you're going to be rendering jsx in the anyway. Hope that helps.
Also try making it a loading.jsx file, you're going to be rendering jsx in the anyway. Hope that helps.
Answer
Hairy WoodpeckerOP
Ah that’ll be it, it wasn’t a server component, thank you