Skeleton Loading Pages with React

Anthony Panagi
Apr 29, 2019 · 5 min read
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Facebook & YouTube

Skeleton pages in React

There are some packages out there that you can use, for example React Loading Skeleton. However, this will add dependencies to your codebase and are not as customisable as if you were to develop your own. The rest of this guide will show you how to implement skeleton loading with styled-components, but the same principles can be applied with vanilla CSS.

Image for post
Image for post

Conclusion

Skeleton loading pages have become the go-to solution for all your loading transition needs. Some research validates the idea that the perceived loading time is shorter for skeletons as opposed to spinners, for example. But before you dive in to skeletons, there are some caveats:

Octopus Wealth

Insights and updates from Octopus Wealth HQ.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store