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!