Loading screen issue

[runic wraith]

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:

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> ) }

[lime epoch]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[coral pewter]

First of all, it isn't visible for the first 0.25 seconds
this 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 page
seems like a css issue. can it be scrolled if you remove the loading.js file?

[runic wraith]

When I use just text it also wont show up immediatelly and when I remove the loading.jsx file it fixes the issue

[coral pewter]

that's... weird. does the loading file have any upper-level layout which also fetches data?

[runic wraith]

No

[coral pewter]

could you make a minimal reproduction repository?

[runic wraith]

Take a look at the code from here:

https://github.com/dialedwebdevelopment/dmin

Live link: https://dmin-five.vercel.app/

[coral pewter]

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

[runic wraith]

So how should I make a loading screen? The 3D model and other assets take time to load.

[coral pewter]

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 much

[runic wraith]

Okay, I use React Three Fiber. Any idea on how I should make it work.

[coral pewter]

never used it, i don't know, sorry

[runic wraith]

Okay, any idea why when I add loading.jsx file I can't scroll my page?

[coral pewter]

i can sroll just fine

[runic wraith]

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