How to show a loading screen when components are loaded in React.js?

What is a Lifecycle Method in React.js? »

Add a Loading… text

Right now, when you start the server, it takes some time to show you the actual Day / Night details. During that time, hrs property in state is a blank string and hasError is false:

       state = {hrs: '', hasError: false};

But, there should be a way to show the user that some information is being loaded (which takes 3 seconds in your case as set by the setTimeout method).

First of all, you’ll need to assign a null value to hrs property, so that you can render() a loading screen when hrs value is not a number (null value).

So, reinitialize the state values as follows (inside the App component) in index.js:

       state = {hrs: null, hasError: false};

Next up, add an additional if statement to check if hrs state doesn’t have a value. In that case, you’d want to show “Loading…” text to the user:

    render(){

       if (!this.state.hrs){
               return <div>Loading...</div>;
       }

       if (this.state.hasError){
               return <div>An error has occurred!</div>;
       }

           return <DayNightDisplay hours={this.state.hrs}/>;
    }

Now, save the file and the server should restart. Upon restart, you’d notice a “Loading…” text for three seconds before actually showing whether it’s Day or Night.

Add a Loading screen

That was about showing a simple loading screen to the user. But perhaps, that wasn’t very intriguing. Let’s now try to show an animated loading screen.

Create a new file called Loader.js inside the src directory of your folder where you can write the code for loading screen. Write the following code for showing the Loading… text, but from a component:

import React from 'react';

const Loader = () => {
    return (
       <div>
           Loading...
       </div>
    );
}

export default Loader;

Now, inside index.js file, import Loader component as follows:

import Loader from './Loader';

And inside the render() method of App component, return the Loader component to be displayed when hrs variable is not initialized:

    render(){

       if (!this.state.hrs){
           return <Loader/>;
       }

       if (this.state.hasError){
           return <div>An error has occurred!</div>;
       }

       return <DayNightDisplay hours={this.state.hrs}/>;
    }

Save both the files, and everything should work just the same. Next, you’re going to customize the look and feel of Loader component.

Before you start, make sure you have the semanic ui CSS linked in your project. If not, go to index.html inside the public directory of your project, add the following CDN to the <head> section:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>

After that, come back to Loader.js and modify the code as follows:

import React from 'react';

const Loader = () => {

    return (
       <div className="ui active dimmer">
           <div className="ui big text loader">Loading</div>
       </div>
    );

}

export default Loader;

Save the file, and you should see a full screen loading screen before getting the Day or Night info.

Leave a Comment