Create a shape shifter Skeleton Card in Vuejs with Vuetify instead of a loader
Problem
Display a loading feedback into a web application is a big thing. A common approach is to just use a spinner loader to notify the user that something is happening.
This method has some drawbacks, for example, it does not say anything about the future content. Therefore the user has no clue of what it is going to be displayed.
Solution
Skeleton screens can be used instead of spinners to provide a stronger feedback
You can read more about them here:
and here:
http://blog.iamsuleiman.com/stop-using-loading-spinner-theres-something-better/
Implementation
Fist of all. The code can be found here as well as the instructions to install it
https://github.com/FrancescoSaverioZuppichini/skeleton-card-vuejs
We are going to use Vuejs to build this
A generic card-based skeleton. A Card is a container for a piece of information.
For this tutorial we will play with Vuetify, a widely used UI framework for Vuejs. You can check it out here:
https://vuetifyjs.com/vuetify/quick-start
Some time ago I developed a library to create Vuejs app from a draw.io diagram called draw.io2vuejs. I will use it to quickly create the project. You can read how it works here:
