Next.js Discord

Discord Forum

Loading not instant

Answered
Black Mouth Cur posted this in #help-forum
Open in Discord
Black Mouth CurOP
So I have an app that deployed on vercel, but when I click a card to go to another page, the loading UI not show in instant, it will first hang in the home page for a second and then start to show the loading UI and then the actual page. this only when the user first time visit the site, after that everything go accordingly. I attach the build size and the folder structure.

basicly it goes from home -> real-estate/[handle]

Thank you
Answered by Bighead carp
Also, a cool tip is to add a loading bar: https://www.npmjs.com/package/nextjs-progressbar
View full answer

60 Replies

Masai Lion
I have the same issue. This, the website built using nextJs, feels horrible if you have more then 300ms response time. There is no instant feedback.
Bighead carp
You need to use Suspense boundaries to show the user that data is being loaded
I added an artificial delay, but that's the general idea
@Bighead carp You need to use Suspense boundaries to show the user that data is being loaded
Masai Lion
There is some time between the request gets to the server and the server gives the Loading state on the suspense boundary. Is it possible to get some instant feedback here?
I know it's not possible to use the built in Suspense boundary for that
Bighead carp
Are you running a dev server or from a build
Masai Lion
A built one, hosted on vercel. The server is in USA, the database as well. I'm in Brazil. This is enought to feel the issue
Bighead carp
You got a link?
Also it would be helpful to see the code
Masai Lion
Let me try to figure out how to expose the component to you. It's behind the auth system
Bighead carp
A video would do
Masai Lion
Sure, just a minute.
Bighead carp
Also, a cool tip is to add a loading bar: https://www.npmjs.com/package/nextjs-progressbar
Answer
Bighead carp
Masai Lion
This was an issue long ago and I don't know how to reproduce. I put it on stale and focused on other parts. Right now it's not happening on my project:
https://www.dietit.co
It was happening on my Patient List page:
https://www.dietit.co/nutri/pacientes
(if you want to check, you can use my test credentials pedro@gmail.com|123456)
I don't know why it's not happening anymore, but since then, I have updated next from 14.0.0 to 14.0.4 and added a loading state to the built in boundary instead of a custom one.
I'm sorry for wasting you time, I don't knwo how to do it right now 😅
Bighead carp
Yeah so on my screen it comes up with a bit of portugese and then loads the tables
Is that not what you want?
Masai Lion
Yes, it is working. But at some point, it took a lot of time until the Carregango... appeared. So it felt like there was no feedback once you click on the link.
Bighead carp
For me it was instant
Hold on let me try something
Nope it's instant
Even when i emulate the network to be Regular 2G
Masai Lion
Yeah, it's caching that Loading state I think
Bighead carp
I cleared my cache
It's instant for me
Are you saying the LOADING text isnt loading?
or the fact you dont like the loading text
Masai Lion
That's hard for me to wrap my head around, we are 3 working on this project and everyone experienced it. I will try to find out what was the issue talking to my colleagues.
Bighead carp
Can you record it happening
@Bighead carp or the fact you dont like the loading text
Masai Lion
No, it was taking a lot of time to load the Loading component
Bighead carp
Also your website looks amazing
Masai Lion
I'm not seeing it anymore, that's the problem, like a bug that's hard to reproduce
Thanks man, I appreciate it.
Bighead carp
To be fair I dont think it should be a big issue
I understand it's quite annoying but I wouldn't spend too much time on it
@Bighead carp I understand it's quite annoying but I wouldn't spend too much time on it
Masai Lion
Yeah, I still have a lot of things to do on this project. But I will try to track it at some point
Bighead carp
Yeah maybe if you have more spare time
Sorry I couldn't be any more help
(you should probably delete those login credentials now)
Masai Lion
I'm supposed to be at vacation now and was bored, Monday I get back to office and I will figure it out. Or at least ask if someone know how to reproduce it. Thank you and sorry again about your time.
Bighead carp
Hey, dont worry
@Bighead carp (you should probably delete those login credentials now)
Masai Lion
We change them every Monday (: We reset the DB
Bighead carp
Also, just a little note, when you add a new patient, you should revalidate the patient list
I created a new patient and then went back to the patient list and it still only had 3 people
@Bighead carp Also, just a little note, when you add a new patient, you should revalidate the patient list
Masai Lion
I'm confused on what should I use, the router.refresh() method or the revalidatePath() method?
Bighead carp
I use revalidatePath because it doesnt re-render everything again
just the path you specify
If you use dark theme, router.refresh will flash your screen white
@Bighead carp just the path you specify
Masai Lion
Got it. Makes sense.
@Bighead carp If you use dark theme, router.refresh will flash your screen white
Masai Lion
That's really important to know, I was planning on adding it lol
@Bighead carp Sorry I couldn't be any more help
Masai Lion
It was really helpfull
Original message was deleted
Bighead carp
Make sure to mark the solution
Masai Lion
I'm not the OP 😅
Bighead carp
@Black Mouth Cur
Black Mouth CurOP
Hi Thank you for the response im going to use next progress bar