如何在渲染组件时添加 Spinner？

Question

suppose,i will use React bootstrap spinner component. how to show this component while rendering another component like app or anything else.

Answer 1

Install react-bootstrap and bootstrap via npm:

npm install react-bootstrap bootstrap

Call dependency in your component:

import Spinner from 'react-bootstrap/Spinner';

In your component function you can use this type of code:

const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
    setTimeout(() => { // after some fake time, component will stop with render
        setIsLoading(false);
    }, 5000);
}, []);

return (
<>
    {!isLoading && <div>All components loaded.</div>}
    {isLoading && <Spinner animation="border" role="status">
        <span className="visually-hidden">Loading...</span>
    </Spinner>
</>
)

On component render, it will show loading spinner for 5 seconds (5000 ms), and then it should show text: "All components loaded."