I am using the skeleton component as part of Material UI's API: https://material-ui.com/components/skeleton/

It makes sense that you should make the skeleton look like the component that will be rendered soon. However, what if the skeleton is a for a list component that has an indeterminate amount of list items? What should my skeleton look like then?

Should it be a skeleton of 1 list item? 10 list items?


Don't think of the skeleton component in a literal sense. The "skeleton" doesn't need to be exactly as big or as many as the actual content. It is used as a placeholder to help the user anticipate where content is yet to load and how/what that content might look like.

Use the skeleton to fill up the empty spaces on the screen where the content would load. So, if you have a list component, have the skeleton show as many items as it takes to fill the screen. 3-4 list items should be fine. There's no rule/guideline for this.

It might also depend on how many items you load at a time or how the loading works. For example, if you start loading the next set of information when the user reaches the end of the page, you can show just one skeleton item.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.