Next.js Discord

Discord Forum

loading.tsx only works when switching between routing groups

Unanswered
Mugger Crocodile posted this in #help-forum
Open in Discord
Mugger CrocodileOP
Hi, we have a project with the following layout:

src/app/
- (foo)
  - a / page.tsx
  - b / page.tsx
- (bar)
  - c / page.tsx
  - d / page.tsx
- error.tsx
- layout.tsx
- loading.tsx
- manifest.json
- not-found.tsx
- template.tsx


All the page.tsx are client components with useSuspenseQuery to load data (we cannot do these requests on the server side, so it is done client side).

Problem: When I switch between the routing groups like a -> c the loading animation is shown, but when I switch between pages in the same group like a -> b it does not show.

Any idea what could be causing this? Do I have to add a loading.tsx in every folder? It did seem to work for a -> b if I copy the loading.tsx into (foo), which doesn't seem like the correct behavior to me.

0 Replies