Build quick and easy loading screens using React Hooks

Hey Devs,

I was finding a good way to make a Loading screen/animation for my small React application, and I found 3 different ways to make good loading screens,

Type-1: Using the react-loading library.

Type-2: Using the react-Lottie library.

Type-3: Using simple CSS.

In this tutorial, we're going to use React hooks.

If you prefer to watch a video tutorial then you can watch it here else just watch the first 2 minutes to get an idea of what we're going to build here.. and keep reading!😄

Let's Start Building...

Create your react app with create react app,

npx create-react-app React-Loading-Screen

Next, install two libraries that we're going to use.

npm install react-loading react-lottie

NOTE: Here, I'm using jsonplaceholder API to get data, to show how we can use pre-loader when using API.

Type-1

Create a separate file like PreLoader1.js.

Create Functional Components and here, we're going to use two states,

const [data, setData] = useState([]);
const [done, setDone] = useState(undefined);

data state: To store data that comes from API calls. done state: It is a boolean to decide weather to show the pre-loader or not.

Now in the useEffect,

  useEffect(() => {
    setTimeout(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((json) => {
          console.log(json);
          setData(json);
          setDone(true);
        });
    }, 2000);
  }, []);

Now in the above useEffect method, First we use the fetch method to get data from API then we convert that data into JSON.

, then we will set the data state with JSON data, and after that set done state to true.

NOTE: Here I have used time out function for 2 seconds so that we can see loading screen for more time.

Now let's render our component.

import React, { useEffect, useState } from "react";
import ReactLoading from "react-loading";

function PreLoader1() {
  const [data, setData] = useState([]);
  const [done, setDone] = useState(undefined);

  useEffect(() => {
    setTimeout(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((json) => {
          console.log(json);
          setData(json);
          setDone(true);
        });
    }, 2000);
  }, []);

  return (
    <>
      {!done ? (
        <ReactLoading
          type={"bars"}
          color={"#03fc4e"}
          height={100}
          width={100}
        />
      ) : (
        <ul>
          {data.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </>
  );
}

export default PreLoader1;

Line 22: we will check if the done state is false then we will render the pre-loading component else we will render the data we want to show.

Line 23: Here I have used a react-loading library, where we only have to set type, color, height, and width. you can find more functionalities on this URL.

Line 30: From here I have mapped the data state inside the ul tag which returns the title of each post in the li tag. (use console.log() inside useEffect to see what kind of data we are getting)

That's the end of Part-1 here.