React Js Build Animated Skeleton Loading Screens Tutorial

In this step-by-step guide, we will learn how to create the animated skeleton loading screens in React app using react loading skeleton library.

As time progresses, significant advancements in user interface design are taking place. Nowadays, Skeleton screens are being used for showing content loading. Skeleton screens are used for showing that a screen is loading.

The skeleton loading screen primarily impersonates the original layout. This reckons the users what is going on on the user screen. The user identifies that the application is loading up along with the content.

This guide will answer how to build a skeleton screen in React using a third-party library to improve the user experience. We will comprehensively help you learn how to create and add skeleton loading animation in react from absolute scratch.

How to Build Animated Loading Skeleton Screen Component in React App

  • Step 1: Install React Project
  • Step 2: Add Bootstrap Module
  • Step 3: Add Loading Skeleton Library
  • Step 4: Create Skeleton Loading Screen Component
  • Step 5: Update Global Component
  • Step 6: Start Development Server

Install React Project

The first thing is to install the Create React App tool, this tool will allow you to develop react apps.

npm install create-react-app --global

We have installed the CRA tool, now by using that tool we are going to install a new react app.

npx create-react-app react-blog

Move into the react app directory.

cd react-blog

Add Bootstrap Module

The requirement of this guide is such that we have to make the api call to the server and fetch the data from the server. We will use the card UI to display the data on the front end.

Hence, bootstrap offers UI components that can swiftly design the UI.

npm install bootstrap

Add Loading Skeleton Library

The loading skeleton library can be installed using npm, make sure to execute the given command to add the library into the react app.

npm install react-loading-skeleton

We now can import the skeleton loading screen css into the App.css file:

@import "react-loading-skeleton/dist/skeleton.css";

Create Skeleton Loading Screen Component

Inside your project folder’s src/ directory, you have to make the components/ folder, then create the Users.js file.

In this file we will write the logic that shows the animated skeleton screen in react component.

import React, { useState, useEffect } from 'react'
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'

function Users() {
  const [users, setUsers] = useState([])

  const getUsers = () => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((json) => setUsers(json))
      .catch((error) => console.log(error))
  }

  useEffect(() => {
    setTimeout(() => {
      getUsers()
    }, 6000)
  }, [])

  const showCards = () => {
    return (
      <>
        {users.map((item) => {
          return (
            <div key={item.id} className="col-sm-3 card-group mb-3">
              <div className="card">
                <div className="card-body">{item.name}</div>
                <div className="card-body">{item.email}</div>
              </div>
            </div>
          )
        })}
      </>
    )
  }

  const showSkeleton = () => {
    return (
      <>
        {Array(10)
          .fill()
          .map((item, index) => {
            return (
              <div key={index} className="col-sm-3 card-group mb-3">
                <div className="card">
                  <Skeleton height={80} />
                </div>
              </div>
            )
          })}
      </>
    )
  }

  return (
    <div>
      <h2 className="mb-4">React Animated Loading Skeleton Example</h2>
      <div className="row">
        {users.length > 0 ? showCards() : showSkeleton()}
      </div>
    </div>
  )
}

export default Users

Update Global Component

We have prepared the loading component, but that component is not triggered because it is sitting idle in the app. For initializing that component we have to register that component into the App.js file.

import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import Users from './components/Users'

function App() {
  return (
    <div>
      <Users />
    </div>
  )
}

export default App

Start Development Server

We are ready to start the react development server, run the provided command.

npm start

Here is the link that will help you test the app:

http://localhost:3000

React Js Build Animated Skeleton Loading Screens Tutorial

Summary

Loading screens provide a robust user experience in product design. Research studies suggest that loading screen exponentially increases user engagement. Interactive animations are considered faster and offer better UX than a simple passive animation progress bar.

Unluckily, loading screens are generally treated as an afterthought in UI design.

In this post, we have learned how to add the animated skeleton effect in React while fetching the data from the server into the bootstrap cards.