Barra de progreso y spinner en Laravel 13 Inertia 2 con Vue

▶

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.ts

***
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .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.ts

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.

Si utilizamos la configuración anterior, tendremos:

El Spinner de carga

Si activamos la opción showSpinner, además de la línea en la parte superior, aparecerá un indicador circular. Esto es ideal para que el usuario sepa que la página realmente está procesando la solicitud y no se ha quedado "congelada".

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.