Transcript

Kent C. Dodds: 0:00 As your application and code's splitting and loading data, all of that scales as your application gets bigger. Eventually, you're going to find yourself in a situation where things aren't loading in the order that you want them to or they're popping into place in a weird way, leading to a sub-optimal user experience. Ultimately, what you want to do is be able to coordinate different loading experiences.

0:23 For this one, we're going to be using SuspenseList. I give you a little bit of background on this, and also some documentation that I recommend you take a look at. I also give you some explanation of some of these values that you're going to be using as well. Feel free to take a look at that.

0:38 For the exercise, we've got ourselves a little app here where you can choose one of these users. Then we have loading spinners for the different parts of our app. We've got the navigation, we have the left nav, we have the main content area here, we have a CSS problem, and we have some extra stuff on the right as well.

0:59 All of this could be different parts of your application that you're either A/B testing, or maybe you don't want to load every single one of these cards because there are infinite permutations of those cards. You just want to load the stuff as they're coming in.

1:14 In any case, we want to load this stuff over time. The current loading experience is not super great. We'd really like to coordinate these loading states.

1:24 The way that this is all built out is we have the navbar, left nav, main content, and right nav, all as lazily loaded components. They each have a different delay on them as well, which you can play around with and fine tune however you like to experiment with this loading experience.

1:42 Then ultimately, all of your changes are going to be happening inside of here. Mostly, there's not really a right answer to any of this. Your objective here is just to play around with SuspenseList and with the different options that SuspenseList gives you for coordinating these suspending components.