Original question: How do I set up a loading.tsx, which is visible whenever there is a redirect to "use server " from next/link

I got a answer, and I did the following

the routes are use server routes redirected from next/link

and I have also tried to do the same by restarting the app, to clear any cache

what is happening right now? What do you see, when you navigate to your page.tsx? How does your page.tsx looks like?

Wait does this only apply for 1 route or all the routes?

that currently applies for your page.tsx

not for login, not for dashboard, ...

is there any way to get it applied for all at once.

Oh now I got it

I don't know another way then copying it in any path

and can't it be like. that loading.tsx overlays the page. I actually want a transparent effect on the prev page

an overlay? that sounds more like a layout 🤔

with a layout can have several elements on the same page. transparent or not, you choose. You can read about layouts here: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

This doesn't help me. loading.tsx is displayed in a seperate page, where there are no elements of the prev page.

you want to do more like this?

Not exactly like this. But similar, if should be like element in that same page

then you can do a combination of layout, intercepting routes and parallel routes. It's kinda hard to describe how everything works, but to keep it at the basics: the layout is the thing around, that layout this stuff and render the list and page. The parallel route handles the loading of the page inside the right and left container and the intercepting route is to load the specific page, that has been clicked. You might want to take a look at this: https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

@Anay-208 solved?

No

Then you might want to give more details 🙂

Hey @Anay-208 ,
For loading.tsx, it's all about where you put it. If it's in the root Tree all pages uses it, then the loading screen pops up for every route. You can understand it better from Image I am providing.

You can learn more from:
https://nextjs.org/docs/app/building-your-application/routing
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

I want loading.tsx to overlay the page

what do you think about this message in which I describe how you can use your loading.tsx as overlay for your page?
https://nextjs-forum.com/post/1185526308130783232#message-1185615266051264624

Its for a specific page, not loading.tsx

then we are back at this point: https://nextjs-forum.com/post/1185526308130783232#message-1186186975829557248
I don't know where you want to go and what is your final goal... so I am not able to help you. Sorry

And it looks like others have the same problem (that they not understand, what's your goal) 🙂
https://nextjs-forum.com/post/1185526308130783232#message-1186212989276270664

I'll share images later on to explain

a long later..

I’ll share tonight

I created a quick one. Didn't got much time.