Display a loading text/spinner until a component is fully loaded(text,images...etc) in React

I searched for a solution like this but I just couldn't find it properly so I am asking this question if anyone can help.

This is a Sandbox that I made and the idea is something like this: I want to show a loading text until my component(let's say a whole website: including images, text.. etc..) is fully loaded, tried to make this with useEffect hook but the useEffect only shows the loading text until the component is mounted, and the hook does that, but there are things like images inside this component that aren't fully loaded yet, so this does not work the way I want. I would appreciate it if anyone knows a way to make this work, there is a lot of information on the web for making something like this with a setTimeout but I think this is a bit of a tricky/fake way to do it because the loading spinner should show depending on the speed of your ISP right? so for users with a better internet connection the loading text/spinner time will be shorter and for others, it will be longer.

Link to Sandbox

https://stackoverflow.com/questions/66619995/display-a-loading-text-spinner-until-a-component-is-fully-loadedtext-images-e March 14, 2021 at 08:45AM