Curso Laravel Inertia - Barra de progreso y spinner

Otro componente que no puede faltar en una web SPA es el de progress bar o barra de progreso; que 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:

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

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

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

Transcripción del vídeo

Un video bastante rápido por aquí también podemos personalizar lo que es el progress bar seguramente no lo hemos visto o no lo has visto todavía porque el mismo bueno aparece cuando va cargar una página y como estamos en local todo esto es prácticamente inmediato y por lo tanto no aparece pero ya tenemos aquí si revisamos al de App js en donde se especifican te mostraba antes cuál es la página o cómo se resuelve la página que estamos cargando mediante inertia la función de inertia que tenemos aquí recuerda que es:

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

Está por aquí también se establece algunas opciones más por ejemplo la de progress que indica la barra de Progreso aquí le puedes pasar varias opciones por ejemplo las que tenemos acá se incluye css un spiner que tuviéramos que configurarlo y un delay para cuando aparece la barra de Progreso realmente no hay que tocarlo Pero simplemente te quería e indicar que esto existe entonces para hacer un ejercicio rápido con esto y entender su funcionamiento ya por aquí como te digo ya tenemos definido la opción y aquí:

showSpinner: false,

Tenemos un color por defecto que ya ahorita lo vamos a cambiar para que veamos que esto funciona entonces para simular este proceso de manera momentánea solamente para este video vamos a colocar aquí un sleep de por ejemplo 3 segundos entonces con esto vamos a simular que cuando entremos la edición de una categoría va a demorar 3 segundos adicionales antes de devolver la respuesta que sería esto Entonces esto sería no sé una un delay en la conexión a internet algún proceso pesado que estés haciendo ahí etcétera y automáticamente con eso sin hacar nada simplemente colocando el sleep que es lo único que yo hice damos edit por aquí vas a ver que aparece una barra de Progreso que bueno obviamente va a demorar 3 segundos en devolver aquí la respuesta entonces, por aquí podemos por ejemplo cambiar el color … entonces es básicamente eso realmente no hay mucho misterio tú ahí, define el color que tú prefieras y obviamente ya quitamos esto y eso sería todo lo que vamos a presentar de la barra de Progreso.

30-08-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Curso Laravel Inertia - Barra de progreso y spinner