Improve your React app with loading UI!
It’s taken me a while to realize this (not sure why!), but letting a user know that an app is in a state of loading is an important part of the overall user interface (UI) experience. This is extremely important if you’ve ever used the free version of the popular hosting service, Heroku, to host your backend.
Heroku has a built in power up/power down mechanism that automatically powers down your application if no one visits your website over a 5–15 minute period of time. Your application will stay down until someone visits again. When someone visits the application, it will load, but typically takes 20–30 seconds to power back up. Not many users will stick around for this, or might believe an app isn’t working, without some sort of UI telling them what’s happening. Enter the react loading library!
What is react-loading?
Loading screens are important to improving the feel of our applications and the simplicity of react-loading makes this a good place to start. The react-loading library is a small collection of easy to use loading animations for React projects. We’ll explore two simple use cases below that will up your UI game!
Scenario 1
Our first use case explores an app that performs a fetch from an api upon initial load. Our simple app looks like this:
Installation of react-loading is a breeze by using npm install react-loading. Next we’ll import it into App.js and add an additional state called isloading that is set to true.
// import dependency in App.jsimport ReactLoading from 'react-loading';// add an additional state in App.jsstate = {
someData: [],
isLoading: true
}
Next let’s add the react-loading component with a ternary statement. It basically says if isLoading state is true, display the react loader , otherwise display ourSomeComponent. Our render() should look like the following:
render() {
return (
<div className="App">
{this.state.isLoading ? (
<div>
<ReactLoading type={"bars"} color={"grey"} />
</div>
) : (
<SomeComponent />
)}
</div>
);
}The final piece of this example is modifying our api fetch to change the isLoading state to false.
someFetch = () => {
fetch(someAPI)
.then(res => res.json())
.then(res => this.setState({
someData: res,
isloading: false
})
)
}Our completed App.js file should look like the below:
Scenario 2
Well what if you have a login page that fires up a backend when a user logs in? It’s equally as easy to implement! Our example case has our login form nested in a navigation bar.
Our boilerplate NavBar with login field might look like this:
Our first steps would essentially be the same. We’d start with importing react-loading and adding an isLoading state.
state = {
someData: [],
isLoading: true
}Next we‘ll modify our render() with anif statement to look like the below.
render() { const loading = this.state.isLoading if (loading) {
return (
<div className="loader">
<ReactLoading type={"bars"} color={"grey"} /> Retrieving User
</div>
)
} return(
<div>
<Navbar bg="dark" variant="dark" />
</div>
)
}
The final piece of this example is modifying our fetch. Our fetch initializes by changing isLoading to true, thus firing up our loading animation. By the end of the fetch, it once again changes isLoading back to false, logs the user in, and provides us with a different looking NavBar.
As demonstrated with the two examples above, adding loading animations to your projects is not only simple, but enhances the overall user experience!
