Transcript

00:00 So when the user selects one of these buttons, we have this handle ship selection that's going to update the ship name, and that will re-render with the new ship name. Then we'll come down here into the ship details with that new ship name, and boom, we'll suspend right there. Because we suspend, it comes up to our suspense boundary and it says, oh, I'll show the ship

00:17 fallback. And that's why we end up with this situation right here where it shows the ship fallback. We don't want to do that in this case. Instead, it would be nicer if we had something that looks like this, opacity 0.6 or 5 or whatever. See, like that kind of is sort of a loading state. You could do a spinner or whatever you want to do for that. But leaving

00:36 up the old stuff and having a more minimal pending UI can be quite nice. And so that's what we're going to do. We need to have some mechanism for knowing if we are in a pending

00:47 state. So is pending, then opacity should be 0.6. Otherwise, it should be 1. And our is pending is going to come from our transition. Use transition comes from React. And here, if I

01:03 just say, let's comment this out and is pending equals true, then that's what it's going to look like. And false, of course, it will not be opaque or yeah, transparent. It will be a little

01:18 transparent when it's pending. So we get it into a pending state by wrapping the thing that triggers the transition in a transition. So start transition, wrap this up. And now react would be like, oh, OK, so you want this state update to happen, but you don't want to get rid of the old

01:35 UI in favor of a suspense boundary until the ship or until the suspending is finished. So ignore the suspense boundary. I'll just render you. I'll give you this pending state so you can do something more local and keep hang on to the old stuff. So now look at that. That's nice.

01:54 And then, of course, it's cash. So you refresh and looks pretty good to me. And that is done by using the use transition hook from React. Thanks, React.

solution

useTransition

Transcript

00:36 up the old stuff and having a more minimal pending UI can be quite nice. And so that's what we're going to do. We need to have some mechanism for knowing if we are in a pending

00:47 state. So is pending, then opacity should be 0.6. Otherwise, it should be 1. And our is pending is going to come from our transition. Use transition comes from React. And here, if I

01:03 just say, let's comment this out and is pending equals true, then that's what it's going to look like. And false, of course, it will not be opaque or yeah, transparent. It will be a little

01:54 And then, of course, it's cash. So you refresh and looks pretty good to me. And that is done by using the use transition hook from React. Thanks, React.