Reactjs Showing Skeleton Loader During API Call

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Showing Skeleton Loader During API Call.

---

For reactjs and bootstrap 5 new comers, please check the below links:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactdemo

cd reactdemo

2. Now we need to run below commands into our project terminal to get axios, skeleton loader, bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm i react-loading-skeleton

npm i axios

npm start //For start project

3. Finally for the main output, we need to add below code into our reactdemo/src/App.js file or if you have fresh setup then you can replace reactdemo/src/App.js file code with below code:

import React from 'react';
//Import libraries
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';
import Skeleton from 'react-loading-skeleton';


class App extends React.Component {
  state={
    products:[],
    skeletonLoader:true
  }
  componentDidMount(){
    //calling rest api for products data
    axios.get('https://www.testjsonapi.com/products/')
    .then(res =>{
      const products = res.data;
      this.setState({products});
      this.setState({skeletonLoader:false})
    })
  }

  
  render(){
    return (
    <div className="MainDiv">
      <div className="jumbotron text-center pt-5"> 
          <h3 className="mt-5 mb-5">therichpost.com</h3>
         
      </div>
      
      <div className="container">
      {this.state.skeletonLoader && (
      <div style={{ fontSize: 20, lineHeight: 2 }}>
        <h1>{this.props.title || <Skeleton />}</h1>
        {this.props.body || <Skeleton count={10} />}
      </div>
      )}
      
      <section class="py-5">
            <div class="container px-4 px-lg-5 mt-5">
                <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                {this.state.products.map((result) => {
                return (
                    <div class="col mb-5">
                        <div class="card h-100">
                          
                            <img class="card-img-top" src={result.product_image} />
                          
                            <div class="card-body p-4">
                                <div class="text-center">
                                  
                                    <a href="#"><h5 class="fw-bolder">{result.product_title}</h5></a>
                                  
                                    {result.product_price}
                                </div>
                            </div>
                            
                            <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                            </div>
                        </div>
                       
                    </div>
                     )
                    })}
                </div>
                
            </div>
          </section>
        </div>
      </div>
  );
}
}

export default App;

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks