Hello All,

Today, I am going to explain about skeleton screens.

You may think they sound somewhat terrifying as well as that they’re difficult to implement, yet consider the possibility that I disclosed to you that they are quite easy to make. When added to your application, skeleton screens turn into a magnificent element to make your application feel unbelievably quick.

When building an application, you’re continually ensuring that you are doing everything effectively from a specialized point of view to guarantee incredible execution. Be that as it may, another, regularly overlooked piece of execution is called seen execution. Seen execution is the means by which quick an activity seems to happen to the client. Skeleton screens are a great way to improve the perceived performance of your app, when combined with traditional optimizations (lazy loading, code splitting, etc).

Skeleton screens, not a scary movie

You have most likely observed skeleton screens previously in the event that you have utilized Facebook, Slack or Medium, however how about we really expound on what they are. We can consider skeleton screens as rendering the “skeleton” or a “mockup” of substance before it has really stacked.

Skeleton screens good example is Facebook. They make heavy use of skeleton screens in their native app and web app. They use a similar implementation to Medium, rendering a Skeleton Screen where content will eventually be:

The page using a skeleton screen has several advantages here that lead to a better experience including:

1. It feels faster by giving an indication of what the content is going to look like before it has loaded.

2. We never block the user from interacting with the app. The user is free to scroll and interact with the app even while the content is still being loaded.

3. The page using a loading indicator is a very jarring experience as it flashes from a loading spinner to the fully loaded page. Whereas the page using skeleton screens provides a much smoother experience when the content loads.

Sweet, can I haz now?

Skeleton screens are pretty simple to make with plain HTML and a little CSS. Here is an example of a simple Skeleton Screen.

HTML

 

CSS