How to Build a React Loading Animation Component

[00:00 - 00:16] All right, so the last thing we'll do to button up our UI is add a loading animation to each page. So our goal is for the loader to be displayed during the split second it takes for our app to retrieve data from the Spotify API, do whatever operations it needs on that data, and then render it.

[00:17 - 00:37] So first up, we're going to add a loader.js file to our components directory. And it's going to look something like this, we're including the style component in here just because it's a pretty small component. And then we're going to go to our index file and export it.

[00:38 - 01:40] And then we'll just add this to the top of our profile page just to take a look at what it looks like. So this loader component is just a little animation of equalizer bars. It should look something like this and each bar should be animating up and down at different rates. The way we accomplish this is by giving each styled bar style component a CSS animation, the dance keyframes up here. And each bar has a different delay prop we're passing to it, which is the animation delay property on the styled bar style component. That's how we kind of give the random dancing effect to these bars. So now that we know what our loading animation looks like , let's add it to our different pages. So first I'll remove this from the top here.

[01:41 - 02:37] And then down here in our turnary, instead of and and here, I'm just going to change it to hit question mark. And then else, I'll say render the loader. And we can check if the loader is actually showing up by coming into the network tab and we'll say throttle by fast 3G. And if we give it a refresh, we'll see that the loader animation shows up here before all the data comes back. And if you come here to test it like this, make sure you disable throttling before you keep developing. Next in the top artist page, we'll go ahead and import loader from components. And then we'll swap this to a question mark, add an else statement, and then add our loader.

[02:38 - 03:48] Then same thing with top tracks. We'll add loader to the imports. And then here we'll update this to add loader to the else statement. And then we'll do this for the playlist page and playlist page as well. Awesome. So it looks like our loader is working. And congrats on making it to the end of module five. In this module, we covered how to efficiently organize routes and components in a react app, how to create abstract and style components and use them in multiple contexts, how to handle fetching Spotify data asynchronously with react hooks, and how to deal with Spotify API paging objects with react hooks. All of our apps pages have been developed. So in the next module, we're going to learn how to prepare our app for production and deploy it to the internet with Heroku.