Next.js Discord

Discord Forum

Loading Screens on Navigation

Answered
Clown posted this in #help-forum
Open in Discord
Ok so i know about Suspense and the special loading.tsx file but it seems it only works on initial load of a route. When navigating to any child routes, the loading page will not appear.

I know its supposed to be instantaneous but when you are fetching in those routes like this and navigating, it will just be a second or two of just...nothing:
const res = await fetch(..);


Is there something wrong that i am doing or is there a way to add a visual indicator on navigation so that until the data is fetch we dont just see nothing happening.
Answered by joulev
yes iirc app/dashboard/loading.tsx only applies to /dashboard, for /dashboard/items you need app/dashboard/items/loading.tsx
View full answer

12 Replies

@joulev can you define "child routes"?
Ah i just meant
"/dashboard" -> parent
"/dashboard/items/" -> child
Masai Lion
So you need navigation?
@Clown Ah i just meant "/dashboard" -> parent "/dashboard/items/" -> child
yes iirc app/dashboard/loading.tsx only applies to /dashboard, for /dashboard/items you need app/dashboard/items/loading.tsx
Answer
if you want granular loading states, i suggest to just use explicit Suspense boundaries
Ahh so copy pasting the loading to all child routes.
Masai Lion
Let’s leave this to the expert
compared to the implicit boundaries done by loading.tsx
How would i make explicit suspense boundaries :/ since im just doing navigation and not wanting the suspense boundary on the Components themself
Anyways, I'll try copying those loading.tsx