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.
First, we want to create a new React app using the following command:
npx create-react-app yourAppName
Next, go to your app folder and run the following command
yarn start
So we will add our bootstrap dependency so we can be able to use bootstrap components
yarn add bootstrap
yarn add react-bootstrap
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;
}
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 …
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>
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;
Kick-start your mobile app development project with pre-built mobile app templates
Apple is reportedly developing a new smart doorbell camera with Face ID technology to unlock…
This month has been packed for Google as it ramps up efforts to outshine OpenAI…
OpenAI has been rolling out a series of exciting updates and features for ChatGPT, and…
A financially motivated phishing campaign has targeted around 300 organizations, with over 4,000 spoofed emails…
Hackers are exploiting Microsoft Teams to deceive users into installing remote access tools, granting attackers…
Data plays an essential role in our lives. We each consume and produce huge amounts…
View Comments
test