How to create a loading screen when first loading a page, loading.tsx file doesn't seem to work
Unanswered
Whiteleg shrimp posted this in #help-forum
Whiteleg shrimpOP
Hello, I'm looking to create a loading screen when the site is first loaded. I've run into sites that load up fast but then have a video or large image that takes long and the hero section ends up having nothing there but boring text. I've seen sites that have a loading screen when the site is first reached. How can something like that be implemented? I've tried having a loading.tsx file in the same top level of the app folder, but no matter what I try, it doesnt show the loading screen. I've tried some other weird stuff that I didn't honestly understand with Router from next/router and using router.events, but that just gave me errors since I had no idea what I was doing.
Any help is appreciated
Any help is appreciated
28 Replies
Netherland Dwarf
Hmm the loadingn only happens until the contents render and
Loading.tsx only works for server
If you want to show images or videos on page load you can look into plaiceholder for images and videos and also image/video compression such as .webp
This way it loads but give blurry background till the content loads also using mux or next cloudinary as it optimzes videos significantly
For animation, i personally use framer motion
So that it shows a loading screen 0-99%
Then shows the page
But i only use this to allow other animation to be ready
@Whiteleg shrimp
If you want to see an example of what i mean, just visit unsplash.com
As you scroll through all the image gallery you will see its all lazy loading and prefetch and while it being fetch it showing a blurry background
Thats what image plaiceholder are for to show something immediately while the image is being loaded
Usually you want placeiholder to be only a few hundred bytes to show up real quick
And this makes google seo or lighthouse happy
Whiteleg shrimpOP
So the loading screens I’ve seen may as well just be hard coded to go through the animation and once done hope everything’s loaded?
loading.tsx is just fancy suspence boundry.. this means it will only ever show if the page is server component and taking some time rdndering (as was said easier, not client to do with this)
Netherland Dwarf
@Whiteleg shrimp if your talking about loading images and videos this is where you use what i mention plaiceholder images or blurDataUrl.
And also optimizing (compressing)
yeah ^ (also imo pages that put large loading page to hide a few images are really bad - and i wonder what the seo is going to be lol)
Netherland Dwarf
For example i wanted to use a video for a hero section its 34MB so i compressed it to 5MB and used optimized video like next cloudinary
i mean idk that provider, but you should use a source that can buffer and get parts instead of all mp4 first (ie youtube)
Netherland Dwarf
Yeah thats what next cloudinary does
nicee
tbh if i need video, ill just embed youtube 😭
Netherland Dwarf
Oh and also some use animations loading screen from 0-100% if they are using like framer motion or gsap animations that require aabout a second delay to hide jumpy start animations. You see this in like dennis snellenberg portfolio
@Whiteleg shrimp So the loading screens I’ve seen may as well just be hard coded to go through the animation and once done hope everything’s loaded?
Yes, you hard code the skeletons and once it's loaded, you remove it and replace with the main content
https://korakota.com
But it's different from the loading.tsx , this one works for page lags , and it's mostly just a blank colored screen with a spinner at the center
https://korakota.com
But it's different from the loading.tsx , this one works for page lags , and it's mostly just a blank colored screen with a spinner at the center
Didnt even consider seo