How To Add Skeleton Loading In React JS

Hello Fellow Developers, in this blog we are going to learn about how to add skeleton loading in react Js.

Skeleton Loading is used to show some crazy loading animation while getting responses from API

First You Need to Install these packages, copy this code into your terminal,

yarn add react-loading-skeleton
npm install react-loading-skeleton

After Installation follow the following steps:-

1 .) Import all required modules and CSS file

2.) I used SetTimeout function for a demo, but you can use the API  also

3.) By default set loading to true and after getting a response from API set it to false

import React, { useState } from 'react'
import Skeleton from 'react-loading-skeleton'
import img from '../assets/img.avif'
import 'react-loading-skeleton/dist/skeleton.css'


const SkeletonExample = () => {
  const skeletonDiv = {
    textAlign: "Left"
  }
  const skeletonWrapper = {
    justifyContent: "center",
    height: '100vh',
    alignItems: 'center',
    display: 'flex'
  }
  setTimeout(() => {
    setLoading(false)
  }, 3000);
  const [loading, setLoading] = useState(true)
  return (
    <>
      <div style={skeletonWrapper}>
        <div style={skeletonDiv}>
          <h1>React Skeleton Loading</h1>
          {loading ? <Skeleton circle width={50} height={50} /> :
            <img style={{ borderRadius: '50%', width: '50px', height: "50px" }} src={img} />
          }
          {loading ? <Skeleton width={250} height={25} /> :
            <div style={{ width: '150px' }}>Header Section</div>
          }
          {loading ? <Skeleton width={250} height={25} /> :
            <div style={{ width: '250px' }}>
              At dictum. Euismod cras sociis
            </div>
          }
          {loading ? <Skeleton width={250} height={25} /> :
            <div style={{ width: '250px' }}>Footer Section</div>
          }
        </div>
      </div>
    </>
  )
}

export default SkeletonExample

For more information visit: https://skeletonreact.com/