Progreso lineal y circular

En todo caso, para evitar problemas con este componente que aún se encuentra en desarrollo, vamos a hacer uso de otro componente en Vuetify también tenemos un componente llamado “Progress linear” y “Progress circular”. “Progress linear” es una barra que muestra un progreso lineal. Esta barra puede tener un estado de indeterminado y entonces presentará esta animación. Podemos manipular su altura para hacerla más prominente. Podemos también cambiar su color según nuestras necesidades, así como tenemos “progress linear” que se puede mostrar con esta etiqueta. Tenemos también un indicador de “progreso circular” que puede tener a su vez también un estado de “indeterminate”. Podemos modificar su tamaño y también el ancho. De la misma manera, también podemos modificar el color. Entonces vamos a usar estos dos indicadores para las “categorías”, uno lineal y para los “productos2 uno circular. Vamos a hacer primero una prueba para las “categorías”, por aquí vamos a agregar una barra de progreso lineal con estado “indeterminate”, de esta manera y se mostraría de esta forma. Vamos a actualizar al inicio se muestra de esta manera, y la idea es que luego desaparezca una vez que ya se obtuvieron las categorías. Nosotros podemos crear una condición de “loading” en nuestro gestor y luego leerlo desde aquí de tal manera que el loading empiece como “true”, o sea cargando y una vez que fetch termine, loading sea “false”. Y entonces gracias a ese valor booleano, mostraríamos acá. Esa es una forma. Otra forma sería aprovechar el estado ya existente de categorías, de tal manera que, si “categories” no tiene elementos, mostremos esto y cuando tenga, mostremos esto otro. Aunque eso funcionaría muy bien para nosotros, porque basta con simplemente poner una condición como esa de aquí. Mostrar mientras la longitud sea cero. Aunque esto funciona muy bien, vamos a demostrarlo. Aunque esto funciona muy bien, van a haber ocasiones en las que tu API o tu recurso online te devuelva un arreglo vacío. Si tu API te devuelve un arreglo vacío, no vamos a mostrar nada. Sin embargo, el request ya terminó y tenemos que desaparecer la barra de progreso. Entonces, con propósitos demostrativos, vamos a implementar un “flag” representando el estado de “loading”. Ello lo haremos en nuestro store de categorías. Así como tenemos este “stateCategories”, vamos a tener un estado de loading con el valor de true porque está cargando inicialmente. Y una vez que terminemos de obtener la data vamos a asignar loading como “false”. Por lo tanto, tenemos que acceder a este estado. Entonces, aquí actualmente estamos mapeando a “categories”. Vamos a mapear también el estado de “loading” y entonces vamos a usar aquí “loading”. Y podemos ponerle también a este “v-list” un “v-else”. De tal manera que si está cargando, mostraremos solo esto. No nos importa para nada esto de acá. Y una vez que termine de cargar se mostrará este “v-list-item” con su directiva “for” correspondiente. Entonces vamos a actualizar. Ahí está cargando. Y una vez que ya cargó, desaparece. Incluso si es que este json nos devuelve un arreglo vacío, el indicador desaparecerá porque estamos usando una variable específica para el estado de “loading”. Vamos a aplicar la misma idea para nuestros productos. Vamos a agregar “loading:true” y una vez que recibimos respuesta, pondremos “loading:false”. Ahora tenemos que hacer uso de este nuevo estado en donde queramos. En este caso nos vamos a “ProductList” y así como leemos este estado “products”, vamos a leer “loading” y vamos a agregar un “loading indicator”. En este caso nos interesa el “progreso circular” con estado de “indeterminat” y con un tamaño de 50. Digamos esto, lo pegamos por acá primero para ver como se ve. Como no hay nada dentro del “progress circular”, podemos abreviar esto de esta manera. Y el progreso se muestra aquí. La idea es que se muestre en el centro mientras no hay productos, vamos a poner aquí nuestra condición “v-if=loading” si está cargando mostramos esto. En caso contrario, mostramos esto otro. Y entonces actualizamos. Ahí están las dos barras. Desaparece la de categorías cuando carga y desaparece el progreso circular cuando cargan los productos. Solo que nos falta centrar esta barra de progreso circular. Vamos a empezar sacando esto por fuera del “v-row” y agregando el “v-else” al “v-row” Bien. ¿De qué manera podemos centrar el progreso circular? Una alternativa es usar “flex”. Podemos agregar un “div” con class “d-flex justify center” y en su interior el progreso circular. Vamos a probar de esa manera entonces. En este caso la condición aplicaría sobre el “div” y en su interior tendríamos el “progreso circular”. Actualizamos y ya tenemos progreso circular centrado horizontalmente. Nos falta centrar verticalmente. Para ello nos vamos a dirigir a la página de “sizing” que tiene relación con la altura. Por defecto, la altura ocupa lo mínimo según el contenido. En este caso queremos una altura que ocupe el 100% visible ante el usuario. Por lo tanto, vamos a usar esta calse “h-100” y lo vamos a aplicar a este “div”, que es el que contiene al progreso circular. Y así como tenemos “justifu-center” para centrar horizontalmente, tenemos también “align-center” para centrar verticalmente, allí está. De esta manera tenemos un “progreso circular” para los “productos” y un “progreso horizontal” para las “categorías”. Hemos puesto un delay de dos segundos a las “categorías” y uno de cuatro segundos para los “productos”. Entonces vamos a subir nuestros cambios. Tenemos “Fetch categories and products data” y hemos agregado indicadores de progreso.

Crea una cuenta y continúa aprendiendo 🚀

Progreso lineal y circular