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
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
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.
14 episodes•1 hr 7 mins•2 years ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!