Loading screen issue
Unanswered
Broad-snouted Caiman posted this in #help-forum
Broad-snouted CaimanOP
I added a loading screen to my website using the loading.jsx file. I have a couple of issues with it. First of all, it isn't visible for the first 0.25 seconds. Also, after it goes away I can't scroll my landing/home page. What should I do to fix it?
Here's my loading.jsx code:
Here's my loading.jsx code:
export default function Loading() {
return (
<div className="loading-screen" >
<div className="loading-image-box" >
<img src="/images/loading.gif" className="loading-image" alt="Loading Image" />
</div>
</div>
)
}16 Replies
First of all, it isn't visible for the first 0.25 secondsthis is probably the time taken for your gif to load. try using only text and not gif, does it show up instantly?
after it goes away I can't scroll my landing/home pageseems like a css issue. can it be scrolled if you remove the loading.js file?
Broad-snouted CaimanOP
When I use just text it also wont show up immediatelly and when I remove the loading.jsx file it fixes the issue
that's... weird. does the loading file have any upper-level layout which also fetches data?
Broad-snouted CaimanOP
No
could you make a minimal reproduction repository?
Broad-snouted CaimanOP
Take a look at the code from here:
https://github.com/dialedwebdevelopment/dmin
Live link: https://dmin-five.vercel.app/
https://github.com/dialedwebdevelopment/dmin
Live link: https://dmin-five.vercel.app/
uhm loading.jsx is only applicable when you have expensive fetching in a dynamic server component, in this case it's a static server component so i'm surprised the loading screen even shows up
Broad-snouted CaimanOP
So how should I make a loading screen? The 3D model and other assets take time to load.
just something more basic like
const [isLoaded, setIsLoaded] = useState(false);
onAllAssetsLoaded={() => setIsLoaded(true)}
if (!isLoaded) return <Loading />;
return ...how you implement
onAllAssetsLoaded depends on your 3d model tech, i don't know it so can't say muchBroad-snouted CaimanOP
Okay, I use React Three Fiber. Any idea on how I should make it work.
never used it, i don't know, sorry
Broad-snouted CaimanOP
Okay, any idea why when I add loading.jsx file I can't scroll my page?
Broad-snouted CaimanOP
Navigate to another page and then back to the home page and then you can't. It's because the subpages have a loading.jsx file
no clue either, sorry.
but when i can scroll the page, i notice that the scroll is not natural, seems like some javascript is messing with the scroll position. that's never a good idea and you are perhaps already experiencing the impact of it. just don't touch scrolling, users will thank you.
but when i can scroll the page, i notice that the scroll is not natural, seems like some javascript is messing with the scroll position. that's never a good idea and you are perhaps already experiencing the impact of it. just don't touch scrolling, users will thank you.