How to Build Animated Skeleton Loading Screen in React 18

Last Updated on by in React JS

In this post, we are going to learn how to create animated skeleton screens in React js component and how to use react loading skeleton plugin to create the animated loading skeleton in React UI.

We will build a simple React app that shows the users’ data in the Bootstrap UI cards component.

We will fetch the actual and authentic data that we will render in React component using the fetch() API.

Since the advancement of user interfaces, we now have more modern ways to tell users that data or content will load in a while.

Spinners and loaders were the old-school ways to inform the users about the data are about to load.

These days Skeleton screens are backing the loading process; in this guide, we will show you how to build skeleton screens in React js and how to use the skeleton screen for displaying the data loading in the react component.

React Js Animated Skeleton Loading Screens Example

  • Step 1: Download React App
  • Step 2: Install Loading Skeleton Module
  • Step 3: Install Bootstrap Package
  • Step 4: Create Component File
  • Step 5: Implement Skeleton Loading Screens
  • Step 6: Update App Js File
  • Step 7: View App in Browser

Download React App

Head over to terminal, type the following command on the console and invoke the command to install the create-react-app tool:

npm install create-react-app --global

You can now install a brand new react app with just single command:

npx create-react-app react-demo

Use command to get inside the app folder:

cd react-demo

Install Loading Skeleton Module

From the console, execute the following command and install the react loading skeleton module in React.

npm install react-loading-skeleton --legacy-peer-deps

Next, you have to add the given css path inside the src/App.css file:

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

Install Bootstrap Package

For this tutorial we will not be writing CSS from scratch therefore install the bootstrap package using the following command.

npm install bootstrap

Create Component File

In order to show you the demo regarding skeleton loading placeholder, we will have to create a List.js file in components folder.

import React from 'react'

function List() {
  return (
    <div>List</div>
  )
}

export default List

Implement Skeleton Loading Screens

To integrate the loading skeleton component in react component, you have to add the following code into the components/List.js file:

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

function List() {
  const [list, setList] = useState([])

  const fetchData = () => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((json) => setList(json))
      .catch((e) => console.log(e))
  }

  useEffect(() => {
    setTimeout(() => {
      fetchData()
    }, 5000)
  }, [])

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

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

  return (
    <div>
      <h2 className="mb-3">React Js Loading Skeleton Screen Example</h2>
      <div className="row">
        {list.length > 0 ? showCards() : showSkeleton()}
      </div>
    </div>
  )
}

export default List

Update App Js File

In this step, you will have to enter into the App.js file, then import and define the List component for showing the loading placeholder while users data is being loaded.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import List from './components/List'

function App() {
  return (
    <div className="container mt-5">
      <List />
    </div>
  )
}

export default App

View App in Browser

In the final step, you will have to use the given command to run the react server.

npm start

You may now test out the app by opening the given url:

http://localhost:3000

How to Build Animated Skeleton Loading Screen in React Js

Conclusion

Skeleton screens improve the user experience by showing the animated placeholder in conjunction with the data loading process.

In this react loading skeleton example, we have learned how to show the skeleton loading screen while data is loading in React js.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.