Use SuspenseList for Coordinating Suspending Components

Share this video with your friends

Send Tweet

When a user lands on your authenticated page, what's the first thing they see? A bunch of loading spinners? Yeah, that's pretty common. It's not an altogether great experience, especially if things bounce around all over the screen while parts of the app pop into place. The problem is that you can't really control which of these things will load first. This is what <React.SuspenseList /> was created to solve.

Here we have an example app that shows us this kind of experience and we want to improve the loading states with React's SuspenseList component.

Sung Kim
Sung Kim
~ 5 years ago

Chase.com probably can benefit heavily with that approach as their site shows 5 loading images, which is overwhelming.

Sorry for the external link but it's the demo (https://imgur.com/a/KOJCHqH) or you can go to chase.com to check their current behavior.

Kent C. Dodds
Kent C. Dodds(instructor)
~ 5 years ago

Excellent example!