Design is important step when creating any product. User experience is key when capturing and retaining the attention of users. Many users don't understand how large our applications truly are and how long things such as HTTP requests or build times could take. When they visit our website but they are introduced to a blank screen, they think the website could be broken and then travel to another website.
In this tutorial, we'll show you to polish your website's user experience by simply adding a big loading spinner when a user visits your site, to indicate that the other components of the website are still loading.
1. Setup your project
We have to setup our React project. In this tutorial, we're going to use create-react-app. In your terminal/CMD, type the following:
npx create-react-app loading-spinner
2. Edit index.html
First step to open index.html. We're going to add div with the "loader-container" class with a child div with the "loader" class. This will be the entry point for our loading spinner within our HTML. Remember, in ReactJS, your project is rendered within the index.html file, specifically within the root div. Adding our loading spinner class directly in the index.html means we can display the class when we start up our React app.
Now that we've set the entry point within the HTML, lets write some CSS to design a loading spinner! In the same index.html, within the header tag, lets add some CSS.
Here is how our full index.html should be at this point. Copy and paste the following in your index.html file:
3. Edit App.js
Now, lets turn our attention to App.js. We're going to do 4 things:
First things first, we have to import useState and useEffect at the top of our App.js file.
We can now define our state variable within App() function. Add the following directly after defining our App() function:
We utilize React Hooks useState() so we can keep track of the value (or state) of a variable throughout the lifecycle of our application. In this example, we're using useState() to keep track of a boolean type variable. We're going to switch the boolean from being "true" to "false" throughout our application. Moving on to our fake request, add the following directly under where we defined our state variable:
Now we can call the useEffect() React Hook to call our someRequest() function, which will remove our loader spinner div within the index.html and toggle our state variable. Copy and paste the following code after our someRequest() function:
Lastly, for our application to display the loading spinner on render, we have to add an except directly before our render() method. Add the following to your App.js right before the render() method:
And thats it go ahead and run your application with the following command in your terminal/CMD:
$ npm start
Now you have a loading spinner that displays as your application (presumedly making some sort of request to a server, as simulated with the use of our someRequest() function) and disappears when our application is finish rendering.
Check out the full project down below using StackBlitz!
Like the content posted on this site? Need help with another web project? Want to give some feedback? Feel free to contact me via email or social media!Know more!