How does loading.tsx work?
Answered
Gull Terrier posted this in #help-forum
Gull TerrierOP
Does this file get wrapped in the layout.tsx file or is the loading.tsx file rendering only what's inside it?
On that note, if I have some data fetching in the layout (for example, loading user data from the next-auth session), does that happen before layout is returned and loading.tsx is rendered?
On that note, if I have some data fetching in the layout (for example, loading user data from the next-auth session), does that happen before layout is returned and loading.tsx is rendered?
Answered by alfon
If you have loading.tsx on the same folder as layout.tsx,
the loading.tsx will be the loading page used to render the children of loading.tsx.
So if you want to create a loading.tsx FOR your layout.tsx, put it one segment above the layout.tsx
the loading.tsx will be the loading page used to render the children of loading.tsx.
So if you want to create a loading.tsx FOR your layout.tsx, put it one segment above the layout.tsx
10 Replies
@Gull Terrier Does this file get wrapped in the layout.tsx file or is the loading.tsx file rendering only what's inside it?
On that note, if I have some data fetching in the layout (for example, loading user data from the next-auth session), does that happen before layout is returned and loading.tsx is rendered?
If you have loading.tsx on the same folder as layout.tsx,
the loading.tsx will be the loading page used to render the children of loading.tsx.
So if you want to create a loading.tsx FOR your layout.tsx, put it one segment above the layout.tsx
the loading.tsx will be the loading page used to render the children of loading.tsx.
So if you want to create a loading.tsx FOR your layout.tsx, put it one segment above the layout.tsx
Answer
so its layout > template > error > loading > notfound > page
@alfon If you have loading.tsx on the same folder as layout.tsx,
the loading.tsx will be the loading page used to render the children of loading.tsx.
So if you want to create a loading.tsx FOR your layout.tsx, put it one segment above the layout.tsx
Gull TerrierOP
100%. Solid. Ended up figuring that out myself through some trial and error. Appreciate the answer tho! Do you happen to know what's
what's
@alfon Click to see attachment
Gull TerrierOP
ugh thank you! guess should have read the docs better... assuming you found it there.
@alfon what's
Gull TerrierOP
half thought that i was supposed to delete lol mb
i found it because i know where it is, you didnt found it because the docs can be confusing to navigate :)
Gull TerrierOP
amazing. thank you!