Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Algunos componentes aún están en etapa de desarrollo. ¿Cómo identificarlos?
Nosotros sabemos que existe un tiempo de espera hasta que consigamos descargar la data para que sea mostrada.
Durante ese tiempo de espera, podemos modificar la interfaz de usuario para que el usuario sepa que aún se está cargando la información.
¿De qué manera podemos representar esta carga inicial en nuestra interfaz de usuario?
Vamos a la documentación de Vuetify y buscamos “loading”.
Vemos que hay una página sobre Skeleton loaders.
Al abrir esta página, nos encontramos con un ejemplo.
Podemos usar este skeleton loader
para que la tarjeta se muestre de esta manera y, cuando termine de descargarse, se muestre el contenido correspondiente.
Primero, vamos a necesitar una variable booleana.
Necesitamos un flag para indicar que se está cargando.
El estado de loading
indica que se está todavía cargando la información.
Entonces loading
será true
al inicio y será false
cuando termine de realizarse el fetch
.
Vuetify, en el ejemplo, muestra que podemos usar una etiqueta v-skeleton-loader
encerrando al item
que está siendo cargado.
Sobre este skeleton loader
podemos indicar el estado de loading
y también podemos indicar un type
.
En este caso, el tipo de contenido que se está cargando es un list-item-to-line
.
Cuando cambiemos el valor de la variable booleana loading
, se ocultará el skeleton loader
y dejará ver lo que está en su interior.
Vamos a hacer una prueba con esto.
Nos dirigimos a nuestro componente que muestra las categorías: CategoryOptions
.
Aquí, vamos a encerrar usando este skeleton loader
a nuestros items
de categorías.
Vamos a poner loading="true"
para que se quede cargando siempre. Por ahora.
Seguimos teniendo este v-list-item
, pero la diferencia es que este skeleton loader
lo encierra.
Guardamos. Actualizamos.
Realmente no vemos ningún cambio por ahora.
Presionamos F12 y nos dirigimos a la consola para ver si hay algún error.
En este caso, dice que no se ha podido cargar el componente v-skeleton-loader
.
Probablemente te estés preguntando cómo es posible obtener este warning
si los componentes de Vuetify están registrados globalmente.
Por ejemplo, nunca hemos tenido que hacer import
de v-list
ni de v-list-item
porque están registrados globalmente.
Sin embargo, v-skeleton-loader
no está disponible.
Esto se debe a que este componente aún se encuentra en una etapa de desarrollo.
Este skeleton loader
lo encontramos a través del buscador general.
Pero realmente se encuentra dentro de la categoría labs
.
Si leemos la introducción de labs
, vemos que Vuetify Labs es una sección para experimentar y usar componentes en desarrollo antes de que sean liberados a producción.
Si queremos usar un componente en etapa de desarrollo, tenemos que especificarlo explícitamente.
Por ejemplo, hoy en día, el componente VDataTable
está en etapa de desarrollo.
Entonces hay que usar un import
desde Vuetify Labs, seguido del nombre del componente.
Uno de ellos es v-skeleton-loader
.
Si queremos usarlo, tenemos que hacer el import
explícitamente como ya se indicó.
Vamos a agregar un import
en nuestro archivo main
.
Nuestro archivo principal contiene cierto código.
Vamos a agregar una sección llamada “Vuetify Labs” e importar VSkeleton Loader
.
Lo importamos desde vuetify/labs
.
Luego de escribir esto, vemos que tenemos autocompletado para VDataTable
y VVirtualScroll
.
Ambos componentes (Data tables
y Virtual scrollers
) están en modo preview
dentro de Labs.
Sin embargo, Skeleton Loader
no aparece autocompletado.
¿Por qué?
Porque no existe para nuestra versión de Vuetify.
La página aparece con un punto verde, indicando que es lo más nuevo actualmente en Vuetify.
En la parte inferior, vemos “Latest release”.
La última versión liberada es la v3.1.13
.
Si revisamos nuestro archivo package.json
, vemos que estamos usando la versión v3.1.2
.
Para evitar problemas con este componente en desarrollo, vamos a usar otro componente.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Nosotros sabemos que existe un tiempo de espera hasta que consigamos descargar la data para que sea mostrada. Por lo tanto, durante ese tiempo de espera, podemos modificar la interfaz de usuario de tal manera que el usuario sepa que aún se está cargando la información. Entonces, ¿De qué manera podemos representar esta carga inicial en nuestra interfaz de usuario? Vamos a la documentación de Vuetify y vamos a buscar “loading”. Vemos que hay una página que nos habla acerca de Skeleton loaders. Si abrimos esta página nos encontramos con este ejemplo. Podemos usar este “skeleton loader” para que nuestra tarjeta se muestre de esta manera y cuando termine de descargarse se muestre finalmente el contenido correspondiente. ¿Cómo funciona esto? Primero que todo, vamos a necesitar una variable booleana. Vamos a necesitar un flag para indicar que se está cargando. El estado de “loading” indica que se está todavía cargando la información. Entonces “loading” será “true” al inicio y será “false” cuando termine de realizarse el “fetch”. ¿De qué manera funciona este skeleton loader? Aquí Vuetify en el ejemplo nos muestra que podemos usar una etiqueta “v-skeleton-loader” encerrando al “item” que está siendo cargado. Sobre este “skeleton loader” podemos indicar el estado de “loading” y también podemos indicar un “type”. En este caso el tipo del contenido que está cargando nos dice es un “list-item-to-line”. Y cuando cambiemos el valor de la variable booleana en “loading”, entonces se ocultará en este “skeleton loader” y dejará ver lo que está en su interior. Vamos a hacer una prueba con esto para empezar. Nos dirigimos a nuestro componente que muestra las categorías que es “CategoryOptions”. Aquí en category options vamos a encerrar usando este “skeleton loader” a nuestros “items” de categorías, y vamos a poner que “loading=”true” para que se quede cargando siempre. Por ahora. Seguimos teniendo este “v-list-item”, pero la diferencia es que este “skeleton loader” lo encierra. Hasta aquí guardamos. Vamos a actualizar y realmente no vemos ningún cambio por ahora. Vamos a presionar F12 y nos vamos a dirigir a la consola para ver si hay algún error. En este caso nos dice que “no se ha podido cargar el componente ”v-skeleton-loader”. Probablemente te estés preguntando cómo es posible que obtengamos este “warning”, si es que los componentes de Vuetify los tenemos registrados globalmente. Por ejemplo, nunca hemos tenido que hacer “import” de “v-list” ni de “v-list-item” por el hecho de que están registrados globalmente. Sin embargo, “v-skeleton-louder” no está disponible. Ello se debe a que este componente en realidad aún se encuentra en una etapa de desarrollo. Este “skeleton loader” lo hemos encontrado a través de este buscador general. Pero este componente en realidad se encuentra dentro de la categoría “labs”. Si nosotros nos vamos a leer la introducción de “labs”, vamos a ver que Vuetify Labs es una sección que nos permite experimentar y usar componentes que todavía están en etapa de desarrollo antes que ellos sean “released”, o sea, liberados a producción. Si nosotros queremos usar un componente que todavía está en etapa de desarrollo, tenemos que especificar explícitamente que queremos hacer ello. Por ejemplo, a día de hoy, el componente “VDataTable” todavía está en etapa de desarrollo. Entonces tenemos que usar un import desde Vuetify Labs, seguido del nombre del componente. ¿Qué componentes están en desarrollo y podemos acceder de esta manera?, pues uno de ellos es “v-skeleton-loader”. Entonces, si queremos usarlo, tenemos que hacer el “import” de manera explícita, como ya lo indicamos. Vamos entonces a agregar un “import” en nuestro archivo “main”. Nuestro archivo principal contiene este código, por aquí nosotros vamos a agregar una sección más llamada “Vuetify Labs” y vamos a importar “VSkeleton Loader”. Lo vam os a importar desde “vuetify/labs”. Luego de escribir esto, vemos que tenemos un auto completado para “VDataTable” y para “VVirtualScroll”. Ambos componentes “Data tables” y “Virtual scoollers” son componentes que están también en modo de “preview” en la sección de “Labs”. Sin embargo, “Skeleton Loaders” no aparece auto completado. ¿Por qué no podemos autocompletar el componente “Skeleton Loader”? Es porque no existe para nuestra versión de Vuetify. Como vemos, aquí está página aparece resaltada como un punto verde, quiere decir que es lo más nuevo que existe actualmente en Vuetify. En la parte inferior vemos un mensaje que dice “Latest release”. Esto indica la última versión que ha sido liberada a día de hoy es la v3.1.13. Si nos dirigimos a nuestro archivo “package.json”, podemos ver aquí que versión de Vuetify estamos usando. En este caso es: v3.1.2. En todo caso, para evitar problemas con este componente que aún se encuentra en desarrollo, vamos a hacer uso de otro componente.
¿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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.