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-select

Step 2: After creating your project folder(i.e. multi-select), move to it by using the following command:

cd multi-select

Step 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.

Javascript

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.

Javascript

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: