How to Display a Loading Spinner while DOM is rendering in ReactJS

Overview

Design is important step when creating any product. User experience is key when capturing and retaining the attention of users. Many users don't understand how large our applications truly are and how long things such as HTTP requests or build times could take. When they visit our website but they are introduced to a blank screen, they think the website could be broken and then travel to another website. 

In this tutorial, we'll show you to polish your website's user experience by simply adding a big loading spinner when a user visits your site, to indicate that the other components of the website are still loading. 

1. Setup your project

We have to setup our React project. In this tutorial, we're going to use create-react-app. In your terminal/CMD, type the following:

npx create-react-app loading-spinner

2. Edit index.html

First step to open index.html. We're going to add div with the "loader-container" class with a child div with the "loader" class. This will be the entry point for our loading spinner within our HTML. Remember, in ReactJS, your project is rendered within the index.html file, specifically within the root div. Adding our loading spinner class directly in the index.html means we can display the class when we start up our React app.

Now that we've set the entry point within the HTML, lets write some CSS to design a loading spinner! In the same index.html, within the header tag, lets add some CSS.

Here is how our full index.html should be at this point. Copy and paste the following in your index.html file:

3. Edit App.js

Now, lets turn our attention to App.js. We're going to do 4 things:

• Define a state variable so we can manage the state of our application
• Define a function that simulates a request
• Use the useEffect() React Hook to run our simulated request
• Render our HTML, based on or state variable

First things first, we have to import useState and useEffect at the top of our App.js file.

We can now define our state variable within App() function. Add the following directly after defining our App() function:

We utilize React Hooks useState() so we can keep track of the value (or state) of a variable throughout the lifecycle of our application. In this example, we're using useState() to keep track of a boolean type variable. We're going to switch the boolean from being "true" to "false" throughout our application. Moving on to our fake request, add the following directly under where we defined our state variable:

We defined a function, someRequest(), that returns a Promise(). A Promise() is a JavaScript method that takes in two arguments; a success callback and failure callback. We use a Promise() to simulate a resolve, knowingly it will fail, and our code will execute the failure callback, which is setting a timeout of 2.5 seconds (or 2500 milliseconds).

Now we can call the useEffect() React Hook to call our someRequest() function, which will remove our loader spinner div within the index.html and toggle our state variable. Copy and paste the following code after our someRequest() function:

Lastly, for our application to display the loading spinner on render, we have to add an except directly before our render() method. Add the following to your App.js right before the render() method:

And thats it go ahead and run your application with the following command in your terminal/CMD:

$ npm start

Now you have a loading spinner that displays as your application (presumedly making some sort of request to a server, as simulated with the use of our someRequest() function) and disappears when our application is finish rendering.

Check out the full project down below using StackBlitz!