What is Skeleton Loading and how to implement it in React

What is Skeleton Loading and how to implement it in React

ยท

6 min read

Background

Last week, I saw an interesting thread discussion about how to reduce the Largest Contentful Paint (LCP) time that is caused by a component that takes a long time to load.

  • In 2020, LCP was 1 of the 3 metrics of the Core Web Vitals declared by Google to be crucial for delivering a great user experience on the web. The Core Web Vitals score affects how your webpage is reflected in search rankings, and is a Search Engine Optimization (SEO) concept that developers should be aware about once we start considering about the business value of a site.
  • You can also use the Lighthouse report service offered by Google, to identify quality of your webpage based on various categories. LCP is considered a facet under Performance.

The initial suggestion by the thread starter was to:

  1. use a placeholder image until the slow component has finished loading
  2. and then swap it out.

Another user then pointed out that this is in fact an implementation of Skeleton Loading - a phrase that I have not heard before ๐Ÿง 

Hence, I decided to write this article to share my findings on what it is ๐Ÿ’ช I'll also share the resources at the end if you are keen on reading the articles yourself.


Rethink the concept of Loading ๐Ÿ”ƒ

Before stumbling upon that thread, I always had the preconception of just adding a Loading Spinner if any component requires a loading state due to slow operations such as fetching of data or updating the database.

However, when I read up online on how Skeleton Loading is usually implemented, it is actually this specific component that we sometimes see on social media, newspaper and community platforms ๐Ÿ‘‡

https://raw.githubusercontent.com/alexZajac/react-native-skeleton-content/master/demos/main.gif

Example from UX Collective

That kind of explains why this component is called the Skeleton Loading component since it is literally this:

๐Ÿฆด โžก๏ธ ๐Ÿ– โžก๏ธ ๐Ÿ—

  1. The component is initially a skeleton ๐Ÿฆด
    • to indicate to the user a rough layout of what they are going to see
  2. The skeleton component slowly gets loaded with more meat ๐Ÿ–
    • where more useful content is rendered and shown to the user.
    • to give the user a sense of progress in waiting for the component to load
  3. Once the component is fully loaded, the user should still hold the drumstick by the bone ๐Ÿ—
    • The layout of the component relative to its parent should remain the same
    • so that the user's experience feels consistent and coherent even when all the component has finished loading and renders entirely what it was intended to show

Afterwards, I looked up on how it is usually implemented.

How Skeleton Loading is usually implemented

There were 2 common packages that were brought up

  1. react-loading-skeleton
  2. @material-ui/core

On their sites, examples of how to use the Skeleton component from the respective packages were included. In both examples, the use of an if else conditional rendering statement in the component directly was necessary in the component render method.


react-loading-skeleton library

Example from react-loading-skeleton

<div style={{ fontSize: 20, lineHeight: 2 }}>
  <h1>{this.props.title || <Skeleton />}</h1>
  {this.props.body || <Skeleton count={10} />}
</div>

Despite having 2.1k โญ on its Github repository, It was a little hard to find from their documentation on how specific variants of their component look like. However, I noticed that they do have a storybook (a popular library for showcasing frontend components). If you're keen, you can clone it and start it locally as well to see what they offer.

image


material-ui library

Example from @material-ui/core

{item ? (
  <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
) : (
  <Skeleton variant="rect" width={210} height={118} />
)}

For the types of Skeleton components that they offer, you can visit their site for viewing directly, their documentation is quite detailed. The Github repository for this library has 67.6k โญ.

image

Screenshot of Material UI's documentation page on Skeleton

Material UI also included this article by Luke Wroblewski (currently Product Director at Google) on why the loading spinner should be avoided.

Food for thought on the package ๐ŸŽ

Both packages seem pretty good if we require a Skeleton component. The Material-UI library also comes with a lot more of other components, styles and features rather than just the Skeleton. However, if we don't use them then it could take up more file size than necessary when we build and bundle our app. You will have to weigh the pros and cons when deciding which package to use.

Food for thought on the code example ๐Ÿ

Rather than which package to use - I was actually more intrigued by the coding style of both examples given to use the Skeleton component. Between the two coding styles on how to use the Skeleton component,

  • I would prefer the use of || whenever possible
  • the ternary operators () ? () : () are generally harder to read for someone who is not familiar with the component.
  • The || operator also enforces you to write your logic simpler.

But why do we have to write it this way ๐Ÿค”

  1. is there really no other way to add Skeleton component logic without an if else conditional rendering statement in it?
  2. What if there are many components that requires a Skeleton - does that mean I have to write similar logic repeated over and over again in the render method?

An idea then came to my mind ๐Ÿ’ก - why not implement the Skeleton logic with React Hooks? โœจ

๐Ÿ’ก So, I'll try to do that and share the results of my attempt in the next article, look forward to that!

Meanwhile, below are the resources that I read through before writing this article, they were very insightful and you can have a look at them too!


Resources

Resources on what is React Skeleton and why use it:


Resources on how React Skeleton can be implemented:


Conclusion

Thank you very much for reading this article! ๐ŸŒŸ

Leave a heart ๐Ÿ’Œ and a unicorn ๐Ÿฆ„ if you like this article!

Please give me some feedback below ๐Ÿ‘‡ I would love to hear from you about how you feel after reading this article or if you have any recommendations for me to learn how to write custom hooks!

Did you find this article valuable?

Support Estee Tey by becoming a sponsor. Any amount is appreciated!

ย