Laravel Inertia Course - Progress Bar and Spinner

Another component that cannot be missing in a SPA website is the progress bar; this is the one that appears when we are performing an operation that requires a certain calculation or time to be resolved; they are usually placed when making a request to the Internet to obtain data or to move from one page to another.

 

 

The use of the progress bar is already configured by default in the project in Inertia:

resources/js/app.js

***

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

In which you can customize, for example, the color; when developing a project locally, it is difficult to see it; in order to do some tests, we are going to defer the loading of some page for a few seconds:

public function edit(Category $category)
    {
        sleep(3);
        return inertia("Dashboard/Category/Edit", compact('category'));
    }

From the list above, if we try to enter the editing of a category, we will see the progress bar.

We can customize it as follows:

resources/js/app.js

createInertiaApp({
  progress: {
    // The delay after which the progress bar will appear
    // during navigation, in milliseconds.
    delay: 250,

    // The color of the progress bar.
    color: '#29d',

    // Whether to include the default NProgress styles.
    includeCSS: true,

    // Whether the NProgress spinner will be shown.
    showSpinner: false,
  },
  // ...
})

• delay, to delay when the progress bar appears.
• color, to change the color of the progress bar and spinner if it is set.
• includeCSS, to indicate if you want to use the CSS provided by default, or you are going to include your own, if you set it to false and do not include a CSS, the bar will not appear.
• showSpinner, to show a loading icon in parallel.

Video Transcript

A pretty quick video here we can also customize what the progress bar is, surely we have not seen it or you have not seen it yet because it appears when a page is going to load and since we are locally all this is practically immediate and therefore it does not appear but we already have it here if we review the App js where it is specified it showed you before what the page is or how the page we are loading is resolved using inertia the inertia function that we have here remember that it is:

public function edit(Category $category)
    {
        sleep(3);
        return inertia("Dashboard/Category/Edit", compact('category'));
    }

It is here where you can also set some more options, for example the progress option that indicates the progress bar. Here you can pass various options, for example the ones we have here include CSS, a spinner that we should configure, and a delay for when the progress bar appears. You don't really have to touch it. But I just wanted to point out that this exists so I can do a quick exercise with it and understand how it works. As I said, we already have the option defined here:

showSpinner: false,

We have a default color that we are going to change right now so that we can see that this works, so to simulate this process momentarily only for this video we are going to place a sleep here of for example 3 seconds, so with this we are going to simulate that when we enter the edition of a category it will take 3 additional seconds before returning the response, which would be this. So this would be, I don't know, a delay in the internet connection, some heavy process that you are doing there, etc. and automatically with that without doing anything simply by placing the sleep, which is the only thing that I did, we click edit here you will see that a Progress bar appears that, well obviously, will take 3 seconds to return the response here, so, here we can, for example, change the color... so that's basically that, there really isn't much mystery, you there, define the color that you prefer and obviously we already remove this and that would be all that we are going to present of the Progress bar.

30-08-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Laravel Inertia Course - Progress Bar and Spinner