Barra de progreso y spinner en Laravel Inertia

▶

Otro componente que no puede faltar en una web SPA es el de progress bar o barra de progreso que ha diferencia del componente personalizado de paginación que vimos antes ya existe en Inertia y es el que aparece cuando estamos realizando alguna operación que requiere cierto cálculo o tiempo en resolverse; usualmente se colocan al hacer una petición a Internet para obtener datos o para pasar de una página a otra.

El uso de la barra de progreso ya viene configurado por defecto en el proyecto en Inertia y también podemos personalizar la barra de progreso. Seguramente no lo hemos visto o no lo has notado todavía, porque esta aparece cuando se carga una página. Como estamos en local, todo esto ocurre prácticamente de manera inmediata, y por eso no se ve.

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',
    },
});

Simulación de carga

En la cual, puedes personalizar, por ejemplo, el color; al desarrollar en un proyecto en un proyecto en local, es difícil ver la misma; para poder hacer algunas pruebas, vamos a diferir la carga de alguna página algunos segundos:

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

Desde el listado anterior, si intentamos ingresar a la edición de una categoría, verás la barra de progreso.

Podemos personalizar la misma de la siguiente manera:

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,
  },
  // ...
})

Opciones de la barra de progreso

En el mismo archivo también se pueden establecer algunas opciones de la barra de progreso, por ejemplo:

• delay, para retrasar cuando aparece la barra de progreso.
• color, para cambiar el color de la barra de progreso y spinner en caso de que esté establecido.
• includeCSS, para indicar si quieres usar el CSS provisto por defecto, o vas a incluir uno propio, si lo colocas en falso y no incorporas un CSS, no aparecerá la barra.
• showSpinner, para mostrar paralelamente, un icono de carga.

Conclusión

En resumen, la barra de progreso de Inertia se puede configurar fácilmente:

• Definiendo color y spinner.
• Simulando cargas lentas para pruebas.
• No requiere configuración compleja; basta con ajustar las opciones que Inertia ya nos proporciona.