How to add Spinner while render a component on react-bootstrap?
In this article, we will add Spinner while rendering a component with the help of react-bootstrap. In the react web application, we can enhance the user experience by adding a Spinner styling component from the react-bootstrap library.
The two ways to add a spinner while rendering are discussed below:
Steps to create React Application and installing Bootstrap:
Step 1: Create a React application using the following command:
npx create-react-app multi-selectStep 2: After creating your project folder(i.e. multi-select), move to it by using the following command:
cd multi-selectStep 3: Install react-bootstrap in your working directory i.e. multi-select by executing the below command in the VScode terminal:
npm install react-bootstrap
npm install bootstrap
Step4: Add Bootstrap CSS to the index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Approach 1: Using Promises
Example 1: In this example, we're using the React Bootstrap Spinner Component to show a loading spinner when data is being fetched. When the user clicks the "Load Data" button, we set a loading state and display the spinner. The data is fetched asynchronously using a promise, and once it's available, we turn off the loading state, hide the spinner, and show the data in a list.
import React, { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner, Button, Container } from "react-bootstrap";
function App() {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const [showSpinner, setShowSpinner] = useState(false);
useEffect(() => {
if (loading) {
setShowSpinner(true);
fetchData().then((result) => {
setData(result);
setLoading(false);
setShowSpinner(false);
});
}
}, [loading]);
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
`Company Profile and Brand:`,
`GeeksforGeeks is a leading platform for
computer science resources and coding challenges.`,
`Founded in 2009 by Sandeep Jain, the platform
has become a trusted source for developers, students, and
professionals`,
`It offers a wide range of tutorials, practice problems,
articles, and courses in various programming languages and
technologies`,
`GeeksforGeeks is known for its competitive programming
challenges and coding contests.`,
`The platform has a strong community of contributors and
learners who help each other grow their skills`,
`Whether you are a beginner or an experienced developer,
GeeksforGeeks has resources to suit your needs.`,
`Join the GeeksforGeeks community today and accelerate
your learning journey!`,
]);
}, 2000);
});
}
return (
<Container className="mt-4">
{" "}
<div className="jumbotron text-center bg-light">
{" "}
<h1 className="text-success">
GeeksforGeeks
</h1>
{" "}
<p>
{" "}
A leading platform for computer science
resources and coding challenges.
{" "}
</p>
{" "}
<Button
variant="primary"
onClick={() => setLoading(true)}
disabled={loading}>
{" "}
{loading ? "Loading..." : "Load Data"}{" "}
</Button>
{" "}
</div>
{" "}
{showSpinner && (
<div className="text-center mt-4">
{" "}
<Spinner animation="border" role="status">
{" "}
<span className="visually-hidden">Loading...</span>
{" "}
</Spinner>
{" "}
</div>
)}
{" "}
{data.length > 0 && (
<ul className="list-group mt-4">
{" "}
{data.map((item, index) => (
<li key={index} className="list-group-item">
{" "}
{item}
{" "}
</li>
))}
{" "}
</ul>
)}
{" "}
</Container>
);
}
export default App;
Steps to run the application:
Step 1: Run the application using the following command from the root directory of the project:
npm start
Step 2: Now open your browser and go to http://localhost:3000/, you will see the following output.
Output:
Approach 2: Using Conditional Rendering
Example : This example uses Conditional Rendering to determine what to display based on the value of the loading state variable. When the button of Load Data is been clicked, the loading state is set to true, which causes the Spinner to be displayed.
import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Spinner, Button, Container } from "react-bootstrap";
function App() {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
setTimeout(() => {
setData([
"Company Profile and Brand:",
"GeeksforGeeks is a leading platform...",
]);
setLoading(false);
}, 2000);
};
if (loading) {
fetchData();
}
}, [loading]);
return (
<Container className="mt-4">
{" "}
<div className="jumbotron text-center bg-light">
{" "}
<h1 className="text-success">
GeeksforGeeks
</h1>
{" "}
<p>
Using Conditional Rendering
</p>
{" "}
<Button
variant="primary"
onClick={() => setLoading(true)}
disabled={loading}>
{" "}
{loading ? "Loading..." : "Load Data"}
{" "}
</Button>
{" "}
</div>{" "}
{loading ? (
<div className="text-center mt-4">
{" "}
<Spinner animation="border" role="status">
{" "}
<span className="visually-hidden">
Loading...
</span>
{" "}
</Spinner>{" "}
</div>
) : (
data.length > 0 && (
<ul className="list-group mt-4">
{" "}
{data.map((item, index) => (
<li key={index} className="list-group-item">
{" "}
{item}
{" "}
</li>
))}{" "}
</ul>
)
)}
{" "}
</Container>
);
}
export default App;
Output:
