Speed Up Your React UX with Skeleton Screens
A study shows that human eye can perceive discrete Images in less than 1 sec and in that timeframe they continue to focus on their flow of what they are looking for. And if time frame exceeds to 5 sec to load actual content, they loose their interest and shift gradually.
To make people happy, we need to give an indication that something is happening even if our content is not loaded or something wrong has happened.
For a web app, skeleton screens 💀 is the way to add mockups like text & images. Many companies like Facebook, Google, Slack and others used this concept.
Medium also use skeleton UI as shown below :
How it works
First, load a skeleton instead of images (usually with a gray or off-white background).
Once the data is fetched, load the actual color of the image from the image metadata.
Finally, lazy load the images to allow the user to actually view the content using the intersection observer API.
Implementation
In React, there are some popular libraries to help us implementing Skeleton Screens.
For ease of understanding and demo purpose I have made a codesandbox.
Skeleton screens significantly improve UX by mitigating the user frustrations associated with entirely blank screens and giving users an idea of what content will look like before it loads.
It’s easy to use skeleton UI in your React applications. Happy Coding :)
