DEV Community

Cover image for Implementing Skeleton Loading in React

Implementing Skeleton Loading in React

Adrian Bece on September 04, 2019

The idea and concept of Skeleton Loading or Skeleton Screens was introduced in 2013. in this blog post by Luke Wroblewski. It describes the concept...
Read full post
Collapse
 
jigneshhdalal profile image
Jignesh Dalal • • Edited

Mind elaborating on "#3 Conditionally load the skeleton in the main component" by posting the main component code?

TIA

Collapse
 
adrianbdesigns profile image
Adrian Bece •

Thank you for reading the article. Skeleton loading needs to be displayed until dynamic data is loaded.

Basically, if you have an isLoading prop on your component. While isLoading is true, component needs to display the skeleton. When data has finished loading and is ready to be displayed, isLoading is set to false and then you display the "real" component with data.

This is how it looks for my use-case.

      <ul className="recipeList">
        {isLoading
          ? [...new Array(24)].map((item, index) => (
              <Skeleton key={`skeleton-${index}`}></Skeleton>
            ))
          : hits.map(({ recipe }: any) => (
              <RecipeCard key={recipe.uri} {...recipe} />
            ))}
      </ul>
Collapse
 
jigneshhdalal profile image
Jignesh Dalal •

Gotcha.. Thanks much!

Collapse
 
mfrachet profile image
Marvin •

This seems to be a place and a good opportunity to put this here github.com/mfrachet/rn-placeholder :p

Collapse
 
adrianbdesigns profile image
Adrian Bece •

That's really cool. Great work. I do prefer writing the Skeleton component from scratch but this is great for people who want to have the components out of the box.