Transcript
00:00 So, one problem you might have noticed is if the user is on a reasonably fast connection and they hover over the globe and it's already loaded and we're ready to go, once I click on show globe, it should show immediately because all the code is ready to go. But when I click on it, it shows a loading state for just a second, just a flash of loading
00:19 state that I'm not a super fan of. And if it's a cached or if we're like really fast, even in that scenario, then it's still a flash of loading state. Not a super fan. At least it's not a flash. It's more of like a showing loading state unnecessarily. An unnecessary loading state, I guess.
00:38 And the reason for this is because of transitions. When a suspense boundary is rendered, it's always going to show the fallback for a short period of time just because we don't want to have that sort of flash of loading state. But if we put this in a transition, in our own transition, then we get to control the pending state.
00:57 And we could throw that in a spin delay and be in a really good place, just like we did in the suspense workshop. If you've been through that already, then this will be very familiar. If you haven't, then go through it because it's really useful. So we're going to be using use transition and spin delay to avoid a flash of pending
01:14 state here and make it transition more instantly. So let's go.