reactjs - Cant get Spinner to work in React hook while waiting for API response

Question

I am trying to get the spinner to load while waiting for API response. I have tried several approaches but non seem to be working I am using the react-spinner library

I set loading to true even before the API call, but still not showing. I know I have to set it to false once the API call is successful, but I don't know what I am doing wrong that is not making the spinner to work

import React, { useState, useEffect } from "react";
import AuthService from "../../../services/auth.service";
import UserService from "../../../services/user.service";
import { BarLoader } from 'react-spinners'


function StatusTransactions() {
    const [transactions, fetchTransactions] = useState([]);
    const [loading, setLoading] = useState(false);
    const [message, setMessage] = useState("");

    const currentUser = Service.getUser();

    useEffect(() => {
        const getTransactions = () => {
            setLoading(true)
            UserService.getPendingTransactions(currentUser.user._id).then(response => {
                fetchTransactions(response.data);
                console.log(response.data)

            }, (error) => {
                const _content =
                    (error.response && error.response.data) ||
                    error.message ||
                    error.toString();

                fetchTransactions(_content);
            }
            ).catch(e => {
            });
        };
        getTransactions();
    }, []);


    return (

        <div className="content">
            <ul className="dashboard-box-list user-dasboard-box">
                {
                    transactions ? <BarLoader loading={loading} /> :
                        transactions.map(transaction => {
                            return (
                                <li key={transaction._id}>
                                    <div className="invoice-list-item">
                                        <strong>Professional Plan</strong>
                                        <ul>
                                            <li><span className="unpaid">{transaction.transactionStatus}</span></li>
                                            <li>{transaction.TransactionBin}</li>
                                            <li>Date: 12/08/2019</li>
                                        </ul>

                                    </div>

                                    {/*  <!-- Buttons --> */}
                                    <div className="buttons-to-right">
                                        <a href="pages-checkout-page.html" className="button">Finish Payment</a>
                                    </div>

                                </li>


                            )
                        })}



            </ul>
        </div>


    );
}

export default StatusTransactions;

Answer 1

I guess you should set size prop here "" as shown in the package documntation