How do I add a website loading screen in ReactJS?

Question

I'm really new to ReactJs, JS and basically all of web development. I trying to create a single page portfolio website using ReactJS and wanted to try some more advanced techniques such as using hooks. I wanted to create a simple effect where an animation plays once (when a user first logs in to my website), then they are brought to the main site. All the resources i've found online relate to loading screens whilst fetching data from an API. Here is my code for the loading screen:

import Typical from 'react-typical';
import "./Loading.scss";
import {useState, useEffect} from 'react';

const Loading = function Loading() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    },18000);

  }, [])

        return (
      <div>
        <h1 id="loading">
          { loading ?  <Typical oop={1} wrapper = 'p'
          steps={[
              "Hello",
              2000,
              "My name is Leonard.",
              3000,
              "I am an aspiring developer",
              3000,
              "Welcome to my website!",
              3000,
            ]} /> : null}
        </h1>
      </div>
    );

}

I'm using a very simple react package called typical which gives a nice animation of words being typed on the screen like a typewriter, then gets deleted, then the next bit of text gets shown etc.. this only loops once. I've used the useState and useEffect hooks with a timer to setLoading to false in 18s which is when the animation stops. As you can see I render the animation only if loading is true, using a ternary operator, then once loading gets set to false then null gets displayed. My app.js looks like this:

import Nav from './Components/Nav';
import "./App.scss";
import Loading from './Components/Loading';

function App() {
  return (
    <div>
      <Loading /> 
      <main>
      <Nav/>
      </main>

    </div>

    
  );
}

export default App;

(Apologies for the awful JSX). The issue i'm having is that both navbar and the loading screen loads at the same time. I'm unsure how to hide all my other components until the animation is finished. Everything I try is waaay to complicated and really doesnt seem very efficient at all. I appreciate any help thank you!

Answer 1

The reason why they're both showing at the same time because in the app.js . You have both the <Loading /> component and the <Nav /> component being rendered at the same time.

There are two solutions you can go for

1. You can style the loading component to take the full screen and cover everything. This can be done by giving the loading screen an id. Say, loading-screen for example and do the following in css:

    #loading-screen { position: absolute; width: 100%; height: 100%; background-color: white; display: flex; justify-content: center; align-items: center; }

BUT make sure you after the loading time passes to hide the loading screen otherwise, it'll keep blocking the view.

2. You can put the loading logic in the app.js instead of it being inside the Loading component. You can have it render the Loading components as long as the loading state is true otherwise load the rest of the app (The navbar, etc..). You can do something like:

    function App() { const [loading, setLoading] = useState(true); useEffect(() => { setTimeout(() => { setLoading(false) }, 18000); }, []); return ( <div> {loading? (<Loading />): ( <main> <Nav /> </main> ) } </div> ); }