DEV Community

Cover image for How to Build a Skeleton Layout in React

How to Build a Skeleton Layout in React

Kyle Luke on January 27, 2021

The use of a Skeleton Layout for asynchronous content is becoming more and more popular across mobile and web apps alike. Google, Facebook, LinkedI...
Collapse
 
degesis profile image
PovilasB

Great article! One tip tho - ditch the loading boolean state. There is more than loading/done states. Best approach is to have idle/loading/success/error states. More management is required but, it saves users from waiting despite API call has failed.

This article by Kent is great explanation why:
kentcdodds.com/blog/stop-using-isl...

Collapse
 
xavierbrinonecs profile image
Xavier Brinon

ahah, I was about to post this, well played.

Collapse
 
nikitaneganov profile image
NikitaNeganov

Actually, his (Kent's) initial structure is not that bad, in his specific case all he needed to do is a) clear position on error or b) move error check higher that position check, i.e. ensuring error's priority

Collapse
 
lukekyl profile image
Kyle Luke

Great tip, I will look into this article! Thanks a ton!!!

Collapse
 
james_baxter_9deedb25c4e6 profile image
James Baxter

I wish people would stop quoting Kent C Dodds.

Collapse
 
iridiumcodes profile image
Iris Diakoumi

Why is that?

Collapse
 
dennismaina profile image
Dennis Maina

Great write up. I always wondered how these guys did it but this article really gave me a head start 😊

Collapse
 
james_baxter_9deedb25c4e6 profile image
James Baxter

Awesome sauce! You should be using functional components. Class based components are no longer recommended.

Collapse
 
lukekyl profile image
Kyle Luke

Thanks James, I was thinking that when building the example but wanted to keep this code tutorial accessible to users that may have not made that switch. I might consider transitioning the codepen in the near future.

Collapse
 
techyniel profile image
Techyniel

Great

Collapse
 
anthonybrown profile image
Tony Brown

Nice 👍