Implementation of Skeleton Screens

Learn about what a skeleton screen UI is, and other types of skeleton screen libraries, along with their pros and cons.

Traditionally, spinners and loaders have been a way of informing users that content would take a while to load. While that approach is fantastic, modern architecture is rapidly becoming obsolete. Skeleton screens are becoming the ideal substitute for conventional loaders, as they concentrate on progress rather than waiting times, reducing disappointment in loading-time.

The difference between a loader and a skeleton screen UI

UI and UX experts tell us that we can keep them engaged while users wait for content to be loaded to a tab.

The idea behind using spinners to engage users before content loads is great; however, the result could be less than ideal because most users may get bored staring at a dummy animated spinner like a clock is. That is what Luke Wroblewski elaborates about.

Skeleton screens have a better user experience by raising annoyance with load-time. By concentrating on improvement rather than waiting times, it creates the impression for users that the information will be shown incrementally on the computer. This is confirmed by Bill Chung in his study.

Define Skeleton Screen?

A skeleton screen is a variant of the UI that does not contain actual content; rather, it imitates the layout of the page by showing its elements in a manner identical to the actual content as it loads and becomes accessible (i.e., when network latency allows).

A skeleton screen is basically a website wireframe, with text and pictures in placeholder frames.

Why is a Skeleton Screen different?

A skeleton UI resembles the actual user interface on the website, so users can understand how soon the site or mobile device can load even before the content appears. Here are a few explanations of why you would want to consider using skeleton screens in your next project:

• It's simpler to emulate a page's layout with a skeleton screen,

• the material loads slowly (not all at once).

Skeleton screens are often known as:

• ghost components,

• placeholders of content,

• loaders of content.

Blockchain.com, YouTube, Twitter, Medium, and other large-scale tech firms view skeleton screens as their content enhances the UX.

Types Of Skeleton Screens

There are various types of screens with skeletons. The key ones are placeholders of text and placeholders of pictures (or color).

Most developers tend to use text placeholders as the skeleton UI on their pages because they are easy to create, and the developer does not need any information about the actual content substance; instead, the skeleton imitates the UI.

Color placeholders are more difficult to create since they require material information.

Other common packages promote the implementation of skeleton screens in web apps. Let's take a closer look at Trigger Placeholder and Skeleton Reaction Ready.

Before deciding which to use for our application, we will look at the pros and cons of each kit.

React Placeholder

PROS

• Components to the placeholder are used to build a custom skeleton UI.

• Animation of the pulses (i.e. the effect of motion on the element) is assisted.

• It comes with an API based on the components.

CONS

• Skeleton components are kept separately, so updating a component's styles can entail upgrading the skeleton component too.

• The learning curve is not linear since multiple elements are required for different needs.

React Loading Skeleton

PROS

• It is API-based and has one part for all customization with props.

• It can be used as a separate part of the skeleton and also directly inside any part, so it is versatile.

• Supports thematic and animated Pulse.

CONS

• For a basic skeleton UI it is easy to implement but difficult for more complex skeletons.

• Having a different part of the skeleton would make it more difficult to manage as the UI and styles shift.

How to create your own skeleton screen?

Drawing the Skeletons in CSS

Next, we will draw the basic shapes which will make up the skeleton of the deck. We can do this by adding various gradients to the image-background property. By nature, linear gradients extend from top to bottom, with various transitions to avoid colors. If we describe the only one-stop color and leave the rest translucent, we can draw shapes.

Keep in mind that here are stacked on top of each other multiple background images, so the order is important. The last description of the gradient is at the back, the first at the top.

.skeleton {
  background-repeat: no-repeat;
  background-image: 
    /* layer 2: avatar */
    /* white circle with 16px radius */
    radial-gradient(circle 16px, white 99%, transparent 0),
    /* layer 1: title */
    /* white rectangle with 40px height */
    linear-gradient(white 40px, transparent 0),
    /* layer 0: card bg */
    /* gray rectangle that covers whole element */
    linear-gradient(gray 100%, transparent 0);
}

As with standard block-level components, these shapes extend to fill the entire room. If we want to change that, we need to define the dimensions explicitly for them. The value pairs set the width and height of each layer in background-size, keeping the same order we used in the background image:

.skeleton {
  background-size:
    32px 32px,  /* avatar */
    200px 40px, /* title */
    100% 100%;  /* card bg */
}

The final step is the placement of the elements on the board. This works much like position: absolute, with values reflecting the property at the left and right. For example, we can simulate a 24px padding for the avatar and title, to suit the appearance of the actual content card.

.skeleton {
  background-position:
    24px 24px,  /* avatar */
    24px 200px, /* title */
    0 0;        /* card bg */
}

Breaking it up with the Custom Properties

In a basic example, this works well-but if we try to create anything a little more complicated, the CSS quickly gets messy and very difficult to read. If that code had been given to another creator, they would have no idea where all those magic numbers come from. Having it sure would suck.

Fortunately, we can now use custom CSS properties to write skeleton styles in a far more succinct, developer-friendly manner-and even take into account the relationship between different values:

.skeleton {
  /*
    define as separate properties
  */
  --card-height: 340px;
  --card-padding:24px;
  --card-skeleton: linear-gradient(gray var(--card-height), transparent 0);
 
  --title-height: 32px;
  --title-width: 200px;
  --title-position: var(--card-padding) 180px;
  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);
 
  --avatar-size: 32px;
  --avatar-position: var(--card-padding) var(--card-padding);
  --avatar-skeleton: radial-gradient(
    circle calc(var(--avatar-size) / 2), 
    white 99%, 
    transparent 0
  );
 
  /* 
    now we can break the background up 
    into individual shapes 
  */
  background-image: 
    var(--avatar-skeleton),
    var(--title-skeleton),
    var(--card-skeleton);
 
  background-size:
    var(--avatar-size),
    var(--title-width) var(--title-height),
    100% 100%;
 
  background-position:
    var(--avatar-position),
    var(--title-position),
    0 0;
}

Not only is this much more legible, it's also much easier to later change some of the values. Plus we can use some of the variables (think —avatar-size, —card-padding, etc.) to describe the individual card styles and keep it in line with the skeleton version at all times.

It is now very easy to add a media question to change parts of the skeleton at different breakpoints too:

@media screen and (min-width: 47em) {
  :root {
    --card-padding: 32px;
    --card-height: 360px;
  }
}

Adding Animations

We can animate our skeleton to make this even easier, and make it look more like a loading indicator. All we need to do is put a new gradient on top layer and then, with @keyframes, animate his location.

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!

This article is contributed by Ujjainee. She is currently pursuing a Bachelor of Technology in Computer Science . She likes most about Computer Engineering is that it allows her to learn and be creative. Also, She believes in sharing knowledge hence is very fond of writing technical contents for the same. Coding, analyzing and blogging are things which She can keep on doing!!