Next.js Discord

Discord Forum

Loading Indicator with still displaying old page components

Unanswered
Orinoco Crocodile posted this in #help-forum
Open in Discord
Orinoco CrocodileOP
I want to make loading indicator like this

it's still display current page while loading
how to do that?

27 Replies

Polar bear
I don't understand that much
so u want this loading to appear but without the UI appearing immediately
am I right?
@Polar bear so u want this loading to appear but without the UI appearing immediately
Orinoco CrocodileOP
I mean
as you can see, current page will not disappear yet while it's loading to new page
I want to display loading indicator like that
when I try to navigate to main page, it's will loading because of slow internet while current page that before i navigate still displaying

so by normally, it's will display loading spinner in tab
but I want to display interface like this instead
Polar bear
i see so u don't want the previous page to show
alright do u have a loading.tsx file?
@Polar bear i see so u don't want the previous page to show
Orinoco CrocodileOP
no i mean
I want to display previous page

website in video is example
Polar bear
I see so the video is what u want to achieve right?
@Polar bear I see so the video is what u want to achieve right?
Orinoco CrocodileOP
yess
Polar bear
I see
and ur case it's loading and the page disappears?
or u haven't implemented that?
@Polar bear or u haven't implemented that?
Orinoco CrocodileOP
not implement yet
but i currently checking source code from https://skateshop.sadmn.com/

I see they use loading.tsx
so it's disappears when loading new page (display skelelon for new page)

so I think, it's will disappears when I using this method
Polar bear
yep
that's what loading.tsx does
so what u can do is when u navigate
u Just display a component while doing a suspense
that component would be the loading component
Orinoco CrocodileOP
hm any example?
@Orinoco Crocodile hm any example?
Polar bear
ye so like when u click this button
while the other page is loading
you offload it
using a suspense for example
and have the loading component appear
that's what i can think of
Orinoco CrocodileOP
alright i'll take a look