Next.js Tutorial: How to Create a Route Loading Bar

hey i'm hunter from skillthrive and in this video i'm going to show you how to add a progress bar at the top of your next js applications to show to your users that they're changing routes now in a react application if you created it with like create react app your app will change pages really quickly but then the data will load in so you have some type of loading state with next.js you might want to use something like this because with a server side rendered page you might click a page and then it takes a second for it to change because it first makes a call to the server to get that data and then that data is going to be presented once that page is loaded so it feels a little weird for a user if they click something and nothing happens so this progress bar helps you know signal to your user that hey we see what we see your requests we're processing it and it just makes things feel a little more snappier so let's go ahead and just look at the final project here that we're going to be creating and you see here the dashboard is a static page so you see that it loads pretty quick but there still was that route change so you saw the progress bar happen really quickly now the team page should take a little bit longer because it's making a call to an api in order to get some users in order to display them on the team page so if we click here keep an eye up on the top here for the progress bar you can see that how it loads in so it says hey we're processing this request and then once it loads in it finishes that animation now nexjs actually has a official example um in their example github repo called i think with loading i'll add that in the description if you're interested and it's very similar to what i'm doing here but instead of just using the in progress uh npm package in order to handle that that animation i'm using a uh you know a wrapper around that in progress called in progress react and this gives you the functionality of in progress but makes it really easy to style and add your own react components in order to get that design that you want so let's go ahead and go into the project here that i have created and once you get to github for this project you'll see that there's a branch called start here and that's the starting point that we have uh right now so let's go ahead and just show you what this looks like so this is essentially looks um the same but it doesn't have that progress bar so we go to dashboard and go to team so see how there's just like a slight second there that's that's the solution that we want this progress bar to fix and i also want to mention that this design these components are coming from tailwind ui now i actually have the the full tailwind ui but they have some of these example or preview components here where you can go in and copy the code in order to get these functionalities and try this out now i'm a big fan of tailwind ui i think it's definitely worth it if you're interested or on the edge of buying but just wanted to mention that in case you wanted to use this in a project i'm no way paid or affiliated with them just thought it was something i needed to mention okay so now that we have that let's jump back into code i'm going to kill my server here clear out a console and there's a couple things that i need to install one is going to be um that react in progress package so i'm going to npm install i'm just going to copy this here from the dependencies and i also want to install um a package for managing state it's a little bit it's not as heavy as something as redux but it's called zeus stand sorry if i'm pronouncing that incorrectly but that's how you spell that there and then just click enter or return in order to install those packages so now that that's installed let's go ahead and create our store with that state component library that we're using so let's create a new folder here call this store and inside there we'll create a new file called use progress store dot js and go ahead and create a new file called index.js and in this we'll say export everything from use progress store and this makes it easy when we want to use certain files in our project we just refer to this store instead of referring to each one individually so let's go into our use progress store here and create our state so we'll say import create from zeus stand and we'll export the const use progress store this is going to use that create function and on this create function we have another function we get access to called set which we use to set the state then we just create this object with our state values and the functions that are used to change them the first one is going to be called a value called is animating which by default will be set to false and then we have the function called set is animating and that is going to take an argument called is animating now it does it could be called anything you could just call this state if you want but the reason i'm calling it is animating is because whatever comes in here we're just going to set it to that is animating value so we say set and we're going to set is animating and we can just leave it like this because the name of what we're passing is the same as the value that we want to change but essentially we're just saying uh is animating like this and if we change this to something like a value we would change this to value as well but just to keep a little uh simpler we'll just set it like that and there we go now we have everything set up for our state now let's go ahead and create the components for our progress bar so i'm going to come into components here create a new folder called progress then i'm going to create a couple files here first one we're going to create one called bar.js create one called container.js then one called progress and last i'm going to create an index where i export everything that i want and now i'm actually only going to be exporting the progress bar from this file because that's the only one we're going to have access to so export everything from progress go ahead and close that we're done there and another thing we want to do and the next thing we want to do is move into our bar component and just go ahead and open this up now i did mention that i'm using tailwind ui in order to style this application which means that i'm using tailwind now nexjs has a really easy way to set up tailwind in your project which i'll link below but if you look at the start here directory or the branch and the github you should already have everything set up for you to get started now i kind of already talked about this but the reason i picked this react in progress component instead of just using the original in progress package is because it's easier to style it if you're just using the in progress what you do is you would import a css you know file and then add your styles or classes there but this makes it really easy to get the functionality of in progress but it doesn't actually render anything creating the components is up to you so if you're using something like style components or in this case tailwind it's really easy to add those styles yourself so let's go ahead and create this component and this component is going to be passed in a couple of props first one is going to be called animation duration the next one is going to be called progress this is going to go ahead and return a div and this div is just going to be there's not going to be any children in this div but we are going to add a class name here now this class name is where we pass in the tailwind classes so let's go ahead and add a background color so background dash indigo 600 the height is going to be 1 which is 4 pixels or excuse me 0.25 rim the width is going to be full so we want to take the full screen it's going to have a left of zero a top of zero and it's also going to have a position of fixed and we're going to add a z index of 50. all right so now that we have that class defined there are some other styles that we want to add to this but these styles are going to be dynamic they're going to be changing based off of what the animation duration and progress values are and the way that we handle dynamic styling when we're using something like tailwind is to just pass in some styles in line like this so we could say margin left and margin left is going to be equal to this string value so we'll say um negative 1 plus the progress multiplied by 100 percent so okay then we have another value here that we're going to write for transition and that's going to be margin left because that's the value that we are targeting and the animation duration so animation duration that's going to be milliseconds and the animation um style is going to be linear so we save that looks like everything looks correct and now let's go ahead now and move on to our container so let's open up our container folder there we're going to export our container here and this one is going to take in animation duration as well children and the next prop is going to be called is finished again this is going to be a div here we're going to have our children passed in here and then we're going to add our class name so class name equals this is going to have pointer events none and then we're going to write those inline styles so style we'll say opacity and this is going to be a ternary operator that's going to look at is finished so if it is finished we're going to set opacity to 0 and if it is not we want to set the opacity to 1. and that should be a comma the next thing we want to do is transition so again we want to add some animation properties to this opacity which is going to look at the animation duration and it's going to set it to milliseconds and have it as linear i spelled that incorrectly there we go make sure i spot it right here as well okay so that's everything for the container now let's go ahead and actually work on the in progress uh component so on this one we actually want to import use in progress from this package here that we installed we also want to import our component so we want to import bar we also want to import container all right now we can go ahead and create our component this one is going to take in that state value called is animating which comes from that state that we just set up and then let's go ahead and use that use in progress react hook to get access to those values that we need to pass to our other components one is animation duration is finished and progress and that equals the use in progress hooked and this use and progress hook takes in one argument in this case which is going to be that is animating value so let's pass it in here okay so now that we have that we can go ahead and write our return here for our component first we have to add our container and remember that this container takes in two arguments it's going to take in animation duration and is finished i'm just going to pass those here and last we want our bar component so that's going to be our bar and this one takes in um two as well but it's going to take in the animation duration and the progress which again we get from this in progress react hook all right so now that we have that the next thing we want to do is we actually want to use this in our application and where we actually do that is in the app so let's go into our pages into our app and then we're going to add this here in our app so it's access on every page now there's a couple things here that we need to import first one is going to be use effect this is coming from react and we also need to import use router which is coming from next router all right so now we have those we need to just go ahead and import the components that we need so we're going to import progress from components and let's make sure we actually exported that or here so we need to act make sure we export this from this index so export everything from progress and then we need to go ahead and import that state that we created so use progress store and that's coming from our store file right so now we have that let's go ahead and get access to those values in our store and the way we do that we first say whatever the value is so this is going to be set is animating equal to use progress store passing in the state and then we can read off that state the value that we want so in this case state dot set is animating we want to do something very similar for the other value which is is animating so we'll call this as animating passing in the state and then getting access to that value on state dot is animating yep next we want to define our router using that use router hook so router equals use router so we call that hook and now we have access to that and the events on it which we're going to be using in our use effect so we'll write our use effect hook which watches for changes in certain components or in certain items here which we can define in this dependency array and what we're looking for in this dependency ray is any changes to our router so now that we have this we can go ahead and define everything we want to do in this use effect hook so we first want to define two two methods here one called handle start and one called handle stop so handle start all this is going to do is set is animating to true and handle stop is this going to set is animating to false now this this entire example is coming uh directly from that uh with loading example that next.js already has but because we're using store it's a little bit different but this example like i said if you need a reference to how they do this in progress make sure you check that out in the description below so now that we have access to the router we can actually get access to events which we can use in order to trigger certain things so on router.events on whatever event that we're looking for so in this case there's an event called um route chain start so whenever this happens we can call some type of function so in this case we call handle start and this documentation i'll link as well in the description below but this is just coming from next js as well now there's a couple more functions here which i'm just going to copy over and paste so there's another event called route change complete so if that's completed we want to call handle stop and if there's any errors we want to call handle stop as well so now that we define what we want to do on these events and they're listening for these events we have to clean up and tell tell react to stop listening for events on our cleanup so in order to clean up those we just return this here and then say instead of on we have a value called off so i'm just going to copy these because they're exactly the same but in this case it's called off all right so now that we have that defined there's just one more thing we need to do and that is to actually use the progress component here in our app so we need to change this return go ahead and cut this out paste it here and then call our progress component and this progress component takes in one argument which is is animating this is complaining because you need some type of wrapper on this which you can use a fragment for and then it's going to stop complaining all right so now we have everything set up let's make sure that everything works by starting up our server so run npm run dev all right so we're getting an error here use in progress is not a function so it looks like i spelled something incorrectly let's go into our progress component so it should be two s's save that make sure that goes away each child in a list should have a unique key prop so that is an issue here um in our team page let's go into our team page this is one i just missed here so let's go where we use this map the key should actually be um it should be good we have a key here so i'm not sure why that's complaining maybe it's in our nav because i think we have another map here scroll down okay so we need to take this key from this a tag make sure it's in our link okay now we got rid of those errors let's go back um into our example here refresh let's go to our home page so you saw that load that looked like it was good dashboard that works and our team works as well all right so that's it you saw how easy it is to add a progress bar to the top of your next js applications in order to signal to your users that they're changing routes and when they actually completed the route changes if you like this video and found it helpful please give it a thumbs up and consider subscribing and be sure to check out our other design and development tutorials on our youtube channel as well as our in-depth guides on skillthrive.com again i'm hunter from skillthrive and i'll see you in the next one you

Channel: Skillthrive

Views: 1,215

Rating: 4.9310346 out of 5

Keywords: next.js tutorial, next js, next router, next tutorial, next js tutorial, nextjs tutorial, next.js routing

Id: fJji8_Ywjmc

Length: 20min 24sec (1224 seconds)

Published: Tue Jul 20 2021