Create 3 different types of Loading Screens in React (Part-1)

Hey People,

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

Type-1 : Using react-loading library.
Type-2 : Using react-lottie library.
Type-3 : Using simple CSS.

This post will be the 3-part series.

If you prefer to watch video tutorial then you can watch it here else just watch 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,

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 separate file like PreLoader1.js.

Create Functional Component and here, we're going to use two state,

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

data state: To store data which comes from API call.
done state: It is boolean to decide weather to show 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 fetch method to get data from api then we convert that data into json,
then we will set 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.

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

Line 23:
Here I have used 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 data state inside the ul tag which returns title of each post in li tag. (use console.log() inside useEffect to see what kind of data we are getting)

That's the end of Part-1 here.