loading...

Discussion on: Implementing Skeleton Loading in React

Collapse
adrianbdesigns profile image
Adrian Bece Author

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!