Installing Inertia from Scratch
This episode is for members only

Sign up to access "Installing Inertia from Scratch" right now.

Get started
Already a member? Sign in to continue
Playing
05. Customizing the progress bar

Episodes

0%
Your progress
  • Total: 1h 7m
  • Played: 0m
  • Remaining: 1h 7m
Join or sign in to track your progress

Transcript

00:00
Inertia comes with a built-in progress bar so when you're navigating between two pages or you're submitting forms you'll see a progress bar at the top of the page. Now at the moment we only have one page here so let's go ahead and create out a new controller, create a fake delay and then see how this looks.
00:17
What we'll then do is go ahead and look at how we can customize this. So we're going to go ahead and make out a dashboard controller here and we'll keep this very very simple. We'll create our new route here called slash dashboard, reference the dashboard controller
00:33
and we'll open the dashboard controller up and create our invoke magic method here which again uses inertia to render out a page. So let's go ahead and render out the dashboard page here and of course we just want to go ahead and create out the dashboard.view page.
00:49
We'll go ahead and create out a template in here and we'll just write dashboard in there for now. Okay so we want to go ahead and navigate this. Let's just use the correct function there. We're going to go over to our home.view page
01:02
and we're going to create a link that goes over to our dashboard page. So to create links within inertia what we want to do is pull in the link component like so. The reason we don't want to use an anchor is because we're working with a single page application here. Let's just try this out real quick.
01:22
So I'm going to create out an anchor in here called dashboard and we're going to go to slash dashboard. What's going to happen with this is when we click on this it's going to do a full page refresh which is not what we want. What we want to do is for this to seamlessly go over,
01:40
load the new data in and work like a single page application. So we're going to go ahead and switch this component out for a link component and we just use href in exactly the same way. The difference now is when we click on this instead of getting that 404 landing on dashboard
01:56
it's seamlessly gone over to the next page and just loaded in that information. We can actually see that over in our network tab if we filter by fetch xhr and we click on dashboard. What this is actually doing is making an Ajax request to this. It's giving any of the props that a dashboard component requires
02:15
and of course contains details about the url and the component as well. So there was no page refresh there you just went ahead and loaded that new data in. So now we're going to go ahead and create that fake delay so we can see this progress bar. So over on the dashboard controller we're just going to use php sleep function to sleep for a few seconds.
02:35
If we now click on dashboard you can see that we get this progress bar at the top while that loads that new page. Of course we've just created an artificial delay here but in reality you'll have data being passed down to that dashboard.
02:48
You might be submitting a form to post something and that might take a while. So there are lots of situations in your app where you're going to see a progress bar. The question is how do we customize this? Well we can do this over on app.js.
03:01
Now we passed in earlier a couple of these options through to create inertia app. What we can also do is pass through the progress option and provide any supported options in here. So for example we could change the color of this which is just going to take in a hex value, a css hex value and let's go over here and hit dashboard.
03:23
You can see that's now changed to a solid black. We can set a delay on this so this is the time it takes for the progress bar to actually show. This might be useful if you don't want this to show very quickly if you're making very small page requests. So for example we could show this after one second
03:41
and if we just head back here to our dashboard, you can see that there's a slight delay before this kicks in and then we see the page. Now the inertia progress bar is a wrapper around in progress.js. So any of the options that this allows you can actually go ahead and use here
03:57
and you can extend this, customize this to pretty much however you want and some more information in the inertia docs about this. Let's look at some other options. So we have a show spinner option.
04:08
We set this to true, let's look at what happens here. If we go back and click on this, you can see that we've got this spinner in the top here which could be quite neat depending on what you're building and to be honest if you want to disable the progress bar altogether you can just set this to false
04:23
and what's going to happen is of course it's just not going to show anything. Your users will see a delay and they won't have any indication that this is loading but you might want to disable the progress bar perhaps if you want to customize this and build your own.
04:37
So there we go, very very simple but you can customize the progress bar directly from where you create your inertia app and remember this is a wrapper around in progress so feel free to check this out to see how you can customize this even further.

Episode summary

In this episode, we focus on the Inertia progress bar and how you can tweak it to fit your app's look and feel.

First, we set the stage by creating a second page (a dashboard) in the app so we can actually watch the progress bar in action during navigation. We walk through setting up a dashboard controller and route, creating the view, and adding a link from the homepage to the dashboard using the Inertia Link component (not a regular anchor tag).

We throw in a fake delay (using PHP's sleep function) so there's enough time to actually see the progress bar when moving between pages. This delay mimics what it would be like if you had a slow network or heavy data processing going on.

Once we've confirmed the progress bar shows up, we jump into customizing it. You'll see how to change the bar's color, add a delay before it appears, and enable a spinner icon. We also briefly mention how you could disable the progress bar entirely, or even build your own if you wanted more control.

All this customization happens in your app.js, where you configure the Inertia app. The progress bar is actually a wrapper around nprogress.js, so you have access to a bunch of customization options—perfect for making sure the loading experience matches your app's vibe.

By the end of the episode, you'll know exactly how to both trigger and tune the progress bar for your Inertia-powered app!

Episode discussion

No comments, yet. Be the first!