Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Progreso lineal y circular
Veamos cómo mostrar un indicador de progreso mientras nuestros datos aún se encuentran cargando. Usemos un indicador de progreso lineal para las categorías, y uno de progreso circular para los productos.
Uso de componentes de progreso en Vuetify
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
Progress linear es una barra que muestra un progreso lineal.
- Puede tener un estado de
indeterminatey entonces presentará esta animación. - Podemos manipular su altura para hacerla más prominente.
- Podemos también cambiar su color según nuestras necesidades.
- Se puede mostrar con esta etiqueta.
Progress circular
- También puede tener un estado de
indeterminate. - Podemos modificar su tamaño.
- También el ancho.
- Y modificar el color.
Uso de indicadores para categorías y productos
Vamos a usar estos dos indicadores:
- Uno lineal para las
categorías. - Uno circular para los
productos.
Prueba para las categorías
Vamos a agregar una barra de progreso lineal con estado indeterminate.
- Se mostraría de esta forma.
- La idea es que luego desaparezca una vez que ya se obtuvieron las categorías.
Podemos crear una condición de loading en nuestro gestor y luego leerlo desde aquí.
-
loadingempieza comotrue(cargando). - Una vez que
fetchtermine,loadingesfalse. - Gracias a ese valor booleano, mostraríamos el contenido.
Alternativa sin usar flag de loading
Otra forma sería aprovechar el estado ya existente de categories.
- Si
categoriesno tiene elementos, mostramos esto. - Cuando tenga, mostramos esto otro.
Aunque esto funciona muy bien, hay ocasiones en que tu API te devuelve un arreglo vacío.
- Si tu API te devuelve un arreglo vacío, no se muestra nada.
- Pero el request ya terminó, así que debemos desaparecer la barra de progreso.
Implementar flag loading en el store
Vamos a implementar un flag representando el estado de loading.
- Lo haremos en nuestro store de categorías.
Así como tenemos stateCategories, tendremos:
- Un estado de
loadingcon valortrueinicialmente. - Una vez obtenida la data, asignamos
loadingcomofalse.
Acceso al estado loading
Actualmente estamos mapeando a categories.
- Vamos a mapear también el estado de
loading. - Vamos a usar
loading.
Podemos ponerle al v-list un v-else.
- Si está cargando, mostramos solo esto.
- Una vez que termine de cargar, se muestra el
v-list-itemcon suv-for.
Actualizamos:
- Aparece cargando.
- Una vez que ya cargó, desaparece.
Incluso si el JSON devuelve un arreglo vacío:
- El indicador desaparece porque usamos una variable específica para el estado de
loading.
Aplicar mismo enfoque a productos
Vamos a agregar loading: true.
- Una vez que recibimos respuesta, pondremos
loading: false.
Usar este nuevo estado
Nos vamos a ProductList.
- Así como leemos
products, vamos a leerloading.
Agregamos un loading indicator.
- Nos interesa el
progreso circularcon estadoindeterminatey tamaño 50.
Pegamos por aquí para ver cómo se ve.
- Como no hay nada dentro de
progress circular, podemos abreviarlo.
Mostrar progreso condicionalmente
La idea es mostrarlo en el centro mientras no hay productos.
- Condición
v-if=loadingpara mostrarlo. - En caso contrario, mostramos lo otro.
Actualizamos:
- Ahí están las dos barras.
- Desaparece la de categorías cuando carga.
- Desaparece la circular cuando cargan los productos.
Centrar progreso circular
Nos falta centrar la barra circular.
- Sacamos el componente fuera del
v-row. - Agregamos
v-elsealv-row.
Alternativa con flex
Podemos usar flex:
- Agregamos un
divcon clased-flex justify-center. - Dentro colocamos el
progress circular.
La condición aplica sobre el div.
- En su interior, el
progreso circular.
Actualizamos:
- El progreso circular ya está centrado horizontalmente.
Centrado vertical
Para centrar verticalmente:
- Nos dirigimos a la página de
sizing. - Por defecto, la altura ocupa lo mínimo.
Queremos altura 100% visible:
- Usamos clase
h-100.
Aplicamos h-100 al div que contiene al progreso circular.
- También agregamos
align-centerpara centrar verticalmente.
Resultado final
De esta manera:
- Tenemos un
progreso circularpara losproductos. - Un
progreso horizontalpara lascategorías.
Se ha puesto un delay de:
- 2 segundos para las
categorías. - 4 segundos para los
productos.
Subimos los cambios:
- Commit:
Fetch categories and products data. - Agregamos indicadores de progreso.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript