Here I add a question.I want to add spinnner ..how can i add spinner in this code

Question

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import auth from '../../firebase.init';
import Cards from '../Cards/Cards';

const MyProducts = () => {
    const[user]=useAuthState(auth);
   
    const [rice,setRices]=useState([]);
    

    const [products,setProducts]=useState([]);
    useEffect(()=>{
       const getItem=async()=>{
        const url= `https://chalghor.herokuapp.com/rice`;
        const {data}=await axios.get(url);
        setProducts(data)
       }
       getItem()
    },[user])
    const remaining=products.filter(product => product.email ===user.email)
    return (
        <div className='mt-5 pt-3'>
            <h1 className='text-center text-success'>My Added Items</h1>
            {remaining.length===0 && <h3 className='text-center'>You doesnt add product</h3>}
           <div className='d-flex justify-content-center'>

here i add a spinner**enter code here** {remaining.map(rice =>

           </Cards>)}
           </div>
        </div>
    );
};

export default MyProducts;

in this code i wantt to add a spinner

Blockquote

i want to add a spinner