How to make loading animation with react-bootstrap

Question

I want to make a loading animation with react-bootstrap, while waiting for an API call. I know how I should set the state to start and stop it, I just don't know how to do it with react-bootstrap. I guess I have to use an Overlay (for the "fade" effect) and a Spinner, but not sure how.

Thank you!

Answer 1

You can achieve it in many ways. One very simple is with conditional rendering: where loading is your state while you are fetching...

{loading?<YourComponent/>:<Spinner animation="border" role="status">
  <span className="sr-only">Loading...</span>
</Spinner>}