I write about the things I learn in the Frontend ecosystem. Most of them are about Next.js and React.
You can find some of my thought pieces on my blog: (https://meje.dev/blog)
What the above commenters are saying is that your preloader isn’t actually preloading anything. It’s just waiting for a few arbitrary secs before showing the page. Assets may have loaded in less than that time, or some may have not fully loaded.
Page preloaders are generally based on a event listening to if all media has fully loaded (or completion of api request). You set an isLoading flag while your listener waits for all media to load fully, and once that’s true, isLoading can safely be set to false, so you can confidently show your page. This may take 1 sec, it may take 6 (hopefully not of course). The point is, you know for sure.
Sure 5 secs might seem like enough time for stuff to load, but you got other considerations - connection quality, device, image location/caching, etc. Conversely, your page might also be ready in 2 secs, and now your making the user wait for no reason (other than flourish).
This is more of a requirement with media and / or interaction heavy pages, where your experience requires everything is ready to ride 100%.
With Next, you’d bind that listener to useRouter’s events - routeChangeStart, routeChangeComplete.
I write about the things I learn in the Frontend ecosystem. Most of them are about Next.js and React.
You can find some of my thought pieces on my blog: (https://meje.dev/blog)
I also figured that adding the delay wasn't neccessary at all, and as you also said the page could be ready in 2 secs, and I'll be keeping the user waiting unnecessarily. Which would in turn account for a poor UX.
Thank you for your explanation. I'll make sure to add the changes in the article. 😎
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Yes, I know about the Image component but that doesn't have much to do with what I'm saying.
I don't think you understand what I'm trying to say but that's ok, my comments will be there to help people having trouble with it !
What will your own approach be like.
Can you share it with me? If you don't mind.
What the above commenters are saying is that your preloader isn’t actually preloading anything. It’s just waiting for a few arbitrary secs before showing the page. Assets may have loaded in less than that time, or some may have not fully loaded.
Page preloaders are generally based on a event listening to if all media has fully loaded (or completion of api request). You set an isLoading flag while your listener waits for all media to load fully, and once that’s true, isLoading can safely be set to false, so you can confidently show your page. This may take 1 sec, it may take 6 (hopefully not of course). The point is, you know for sure.
Sure 5 secs might seem like enough time for stuff to load, but you got other considerations - connection quality, device, image location/caching, etc. Conversely, your page might also be ready in 2 secs, and now your making the user wait for no reason (other than flourish).
This is more of a requirement with media and / or interaction heavy pages, where your experience requires everything is ready to ride 100%.
With Next, you’d bind that listener to useRouter’s events - routeChangeStart, routeChangeComplete.
Hope I explained that well?
Yes Stephen, you explained it absolutely well.
I also figured that adding the delay wasn't neccessary at all, and as you also said the page could be ready in 2 secs, and I'll be keeping the user waiting unnecessarily. Which would in turn account for a poor UX.
Thank you for your explanation. I'll make sure to add the changes in the article. 😎