softare development

React JS: Show And Hide Loading Animation on Button Click

Let’s face it: We all hate to be kept waiting, especially when we don’t have control over the waiting process.

When developing software applications, there’s a chance that users will face slow connection issues, time-consuming data fetching processes, or maybe a non-optimised code.

Whatever the issue, you want to be able to give the user feedback on what’s going on so that the user, at the very least, understands that the waiting period is not in itself a bug.

We can do that effectively in React using loading animations.

In this tutorial we shall be using Bootstrap’s spinner to show loading animation in react js.

So, let’s get started.

1. Create a React app

First, we want to create a new React app using the following command:

npx create-react-app yourAppName

2. Run the application

Next, go to your app folder and run the following command

yarn start

3. Add Bootstrap dependency

So we will add our bootstrap dependency so we can be able to use bootstrap components

yarn add bootstrap
yarn add react-bootstrap

4. Let the coding begin

Now, let us modify our App.js file as follows, and we shall be using class components

import React, { Component } from "react"; 
import 'bootstrap/dist/css/bootstrap.min.css';
import { Spinner, Button } from 'react-bootstrap';

class App extends Component {
render(){
return(
<div class="container">
 <div className="btnContainer">
       <Button variant="success">Show Loader</Button>
       <Button variant="primary">Hide Loader</Button>
       </div>
</div>
)
}
}

export default App;

Here, we created a button that will both show and hide the loading animation respectively, depending on the state of our application.

Let’s add a bit of basic styling in our App.css file, shall we?

.btnContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
   position: relative;
   top: 40vh;
 }

See what we have now:

Next, we will set our state in the constructor method and we will set our initial loading state to false.

constructor(props){
    super(props);
    this.state = {
      loading: false
    }
  }

Also, we need to create a function. This function handle the process of showing and hiding our spinner element.

   toggleLoader = () => {
     if(!this.state.loading){
       this.setState({loading: true})
     }else{
       this.setState({loading: false})
     }
  }

Let’s explain what’s going on in the above code …

Here, we have an arrow function where we are checking the state of the application. If the application is in a loading state, we want to show the animation and if not, we want to hide the animation. That’s what we’re effectively doing.

So, we would put the following code in our render() method

render(){
  return (
    <div>
       
      <div className="btnContainer">
       
    {this.state.loading ?  <Spinner style={{marginBottom:27}} animation="border"            variant="danger" /> : null }
</div>
</div>
)
}

So, here we have our spinner from bootstrap and we’re using the ternary operator to check whether or not the Spinner is loading, and that is great. But …

What About Our Button Text?

Now, here’s the thing: if our spinner is not loading, we want the text to read “Show Loader” and if it is loading, we want the text to read “Hide Loader”. So, we add the following code:

<Button onClick={() => this.toggleLoader()} variant={'primary'} size="lg">{this.state.loading? 'Hide Loader': 'Show Loader'}</Button> 

Here’s the code for the full application:

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner, Button } from "react-bootstrap";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  toggleLoader = () => {
    if (!this.state.loading) {
      this.setState({ loading: true });
    } else {
      this.setState({ loading: false });
    }
  };

  render() {
    return (
      <div>
        <div className="btnContainer">
          {this.state.loading ? (
            <Spinner
              style={{ marginBottom: 27 }}
              animation="border"
              variant="danger"
            />
          ) : null}

          <Button
            onClick={() => this.toggleLoader()}
            variant={"primary"}
            size="lg"
          >
            {this.state.loading ? "Hide Loader" : "Show Loader"}
          </Button>
        </div>
      </div>
    );
  }
}

export default App;

Congrats!

React JS Bootstrap Spinner Animation

Kick-start your mobile app development project with pre-built mobile app templates

View Comments

Recent Posts

ReferenceError vs. TypeError: What’s the Difference?

When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…

5 hours ago

document.querySelector() vs. getElementById(): Which is Faster?

When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…

6 hours ago

npm vs. Yarn: Which Package Manager Should You Use in 2025?

When starting a JavaScript project, one of the first decisions you’ll face is: Should I…

2 days ago

Why Learn Software Development? (And Where to Start)

Software development is one of the most valuable skills you can learn. From building websites…

6 days ago

JavaScript Multidimensional Arrays

In JavaScript, arrays are used to store multiple values in a single variable. While JavaScript…

2 weeks ago

What is Containerization

Containerization is a lightweight form of virtualization that packages an application and its dependencies into…

2 weeks ago