Using skeleton loaders in place of standard spinners
For quite a while, a lot of applications followed the convention of using spinners as a way to signal to users that a resource or page was being loaded. But recently, there has been an increase in the adoption rate of skeleton loaders, in place of standard loading spinners, as seen with big companies such as Medium, Slack, Facebook, and YouTube, in order to provide a more streamlined user experience.
So what is a skeleton loader?
A skeleton loader is a wireframe-like screen that is usually modeled after the layout of the actual content to be displayed while the actual content loads progressively.
There are several ideas behind skeleton loaders, such as:
- To visually trick users by creating the perception that the requested content is being loaded at a faster pace.
- Provide users with a fuzzy preview of the actual content while they wait.
- Load content progressively and avoid the simultaneous loading of all the contents on a page.
Let's see how a skeleton loader would work and compare it to a conventional spinning loader. Here we have a page with a defined layout that displays data from an API in the form of a list.
Here is the same page using a conventional spinner loader
Finally, there are some great packages that could be used to implement skeleton screens in your web app. Some of them are:
React:
Vue
And that's it, folks!.