Creating a Splash-Screen in your React Web App

What’s a splash screen? Why you must implement it?

If you came here by googling it you probably already know what it is. If otherwise, and for my subscribers, Splash-Screen is just a fancy name for Loading Screen, and also a very clever idea, that appears at the starting of any app/website. Why the clever idea? Two main reasons:

1. Show your logo/brand name more and more to the user (creating long lasting impression of your branch logo in your customers mind)
2. Fetch any content/data in background (without showing any boring loadings), that you might want to show first to your users.

Shifting from Splash Screen to Main home screen

Now before we get our hands dirty, its assumed that you already have your react app setup and are able to run it. Nonetheless, you can always find the complete solution with this GittHub repo. Fork, Download and/or Use it as per you desire. No licences or restrictions for personal or commercial or any kind of uses.

Prerequisite: Basic Understanding of:

1. ReactJs
2. HTML

Let’s Get Started

The best way to develop a splash screen is using a Higher Order Component, or more often called as a HOC. If you don’t know what a HOC is or how to use it. Don’t worry. As we will see while developing the splash screen, the concept is simple to use. However, for your benefit here is the formal definition:

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.

**Adding the splash-screen component
**With your app up and running create a new file called _withSplashScreen.js_ under the _./src/components_. Notice that the file name here starts with the prefix with, this a common and good practice among react developers. Whenever you build a HOC prefix the name using _with_.

Once above file is created, insert the following code:

import React, { Component } from "react";
import logo from "../logo.svg";

function SplashMessage() {
  return (
    <div>
      <img src={logo} className="App-logo" alt="logo" />
    </div>
  );
}

export default function withSplashScreen(WrappedComponent) {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
      };
    }

    async componentDidMount() {
      try {
        // Put here your await requests/ API requests
        setTimeout(() => {
          this.setState({
            loading: false,
          });
        }, 1000);
      } catch (err) {
        console.log(err);
        this.setState({
          loading: false,
        });
      }
    }

    render() {
      // while checking user session, show "loading" message
      if (this.state.loading) return SplashMessage();

      // otherwise, show the desired route
      return <WrappedComponent {...this.props} />;
    }
  };
}

As we can see in this file, there are 2 functions:
1. SplashMessage: This is the component which the HOC will show, while it processes any requests.
2. withSplashScreen: This is the HOC itself.

This HOC accepts a parameter called WrappedContent so that it is aware of what the App is trying to render. Now, when the React calls the componentDidMount method, the component starts to execute the code and make call to any requests if present. Once this request gets fulfilled, this function now calls setTimeout with a delay of 1 second (or 1000 ms).

This timeout is actually imitating a real-world scenario of what would happen if there was any request made, which obviously will result in some delay in getting the response over the network.

Now during this delay, the HOC will replace the component that the app desires to render (i.e. WrappedContent), with the SplashMessage component. Once the app finishes fetching the requested data, after 1 second the loading state will be set to loading: false by the HOC, which will cause a re-render resulting the app to render WrappedContent this time instead of the SplashMessage component.

Till now we haven’t made the use of our HOC component yet. It’s time to get things to work.

Update your App.js by making the following changes as per comments mentioned:

import "./App.css";
import withSplashScreen from "./components/withSplashScreen"; // Include this line

function App() {
  return <div className="App">Hello, World!</div>;
}

// Update this line, so that withSplashScreen gets App as parameter
export default withSplashScreen(App);

Note: Calling withSplashScreen(App) makes the WrappedContent parameter of the withSplashScreen component point to App. That is, after finishing the splash screen task, splash screen or to say the HOC will end up rendering the App component itself.

Voila! you just successfully created a Splash Screen for your React web app. To see it in action, start your app (or simply reload the page, if your app is already running). You will see the splash screen for the time your request takes to load (if any) + 1000 milliseconds as per setTimeout.