How to create a loading Spinner on React and Semantic UI

I’ve been creating some applications using API to fetch some information and sometimes this fetch request takes time to return whatever information we need at the moment leaving the page blank.

In the past, I've been using some logic to show at least a message on the page saying it's loading but seems a little ugly. So let's create a reusable react component that shows a loading image like the one you see on a youtube video for buffering.

I’m going to use Semantic UI for styling and let me show you how to easily use this without installing that into your PC. Include the following link into your index.html located in your public library.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">

Remember this is inside the head element in that index.html

Now inside the src file or whatever folder name, you have your components in let's create the Spinner.js file. now we are going to navigate to the https://semantic-ui.com/elements/loader.html page and select the loading amination you prefer and copy the JSX or HTML elements you are going to use. You can leave out the UI SEGMENT div and use the rest like so:

<div class="ui active dimmer">  
  
 <div class="ui text loader">Loading</div> 
  
</div>

Now that we have the code we need from this page let's go and start working on the Spinner component.

import React from 'react'
const Spinner = () => {
return ()
};
export default Spinner;

We need to import React from ‘react’ create our functional component and export it to be able to use it. inside the return, we need to add the code from the SEMANTIC UI web page.

import React from 'react'
const Spinner = () => {
return (
<div className="ui active dimmer">
  <div className="ui big text loader">
   loading...
   </div>
</div>
);
};
export default Spinner;

Now I'm going to show the code for the app I was working on and where I needed this component.

import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay'
import Spinner from './Spinner'
class App extends React.Component {
  state = {lat: null, errorMessage: '' };
   componentDidMount() {
    window.navigator.geolocation.getCurrentPosition(
     position => this.setState({lat: position.coords.latitude}),
      err => this.setState({errorMessage: err.message})
      );
   }
render() {
  if (this.state.errorMessage && !this.state.lat){
  return <div>Error: {this.state.errorMessage}</div>;
  }
   if(!this.state.errorMessage && this.state.lat){
   return <SeasonDisplay lat={this.state.lat}/>
   }
  return <div> Loading </div>
};
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

In this app, I have a text showing up while the app is fetching the information I needed. however, now that I have an actual component I can remove that div and use the component I was working on like so:

import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay'
import Spinner from './Spinner'
class App extends React.Component {
state = {lat: null, errorMessage: '' };
componentDidMount() {
window.navigator.geolocation.getCurrentPosition(
position => this.setState({lat: position.coords.latitude}),
err => this.setState({errorMessage: err.message})
);
}
render() {
if (this.state.errorMessage && !this.state.lat){
return <div>Error: {this.state.errorMessage}</div>;
}
if(!this.state.errorMessage && this.state.lat){
return <SeasonDisplay lat={this.state.lat}/>
}
return <Spinner />
};
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Now let me show you the before and after.

Before:

After:

This is it. Hope this helps someone like me. happy coding.