Vuetify Labs: VSkeleton

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.

Crea una cuenta y continúa aprendiendo 🚀

Vuetify Labs: VSkeleton