00:00 So, what we're going to do is get our transition. So, isTransitionPending and startTransition. That's going to come from useTransition, not useState, AI assistance. You got to always review their code, and we're going to do the HANA 100 useSpinDelay, but here in a second, we'll

00:18 observe the reason why that's necessary. So, we'll just actually, for now, we'll call this isPending. Then down here, we'll say our opacity is 0.6 if we're pending, otherwise it'll be one. Then when we make

00:38 the state change that triggers the suspense or the suspending component, then we're going to startTransition here. That way, the suspending event that happens as a result of this state change, will trigger as part of this transition

00:55 rather than just showing the suspense fallback here. What that allows is for us to show this opacity, so the user can still see, oh, okay, they are responding or whatever. We could, if we wanted to, have a loading state, like it could be exactly the same thing. In fact, we can make the fallback and the pending show the same thing, but now we have a little bit more control over it.

01:14 So, let's take a look at how this impacts things in the event of a really fast load. So, I hover over this, it's all loaded, I click it, and it instantly shows. So, no longer are we just going to show the suspense boundary automatically, it will instantly show. But the problem is, if we're on a reasonably fast network connection,

01:34 so it's hard reload, whoops, hard reload with no cache, and I go to a reasonably fast connection, whoops, I just, where did I go? Yeah, there we go. We'll click on Show Globe, and it is showing the opacity, and then finally it loads it in. One thing that's very difficult for me

01:54 to reproduce for you right now is a situation where it takes 300 milliseconds to load, and we show the pending state at 250 milliseconds or something, or you could use a CSS transition delay,

02:11 whatever, to prevent showing the flash instantly. But yeah, there's like this timeframe where we could just show the pending state for like 50 milliseconds, and that would be really jarring. So, that's why we use useSpinDelay to improve that transition here,

02:30 and we're going to bring in useSpinDelay from SpinDelay, and we're just going to use the defaults here. So, we'll rename this to isTransitionPending. We'll stick isTransitionPending in there, and isPending comes from SpinDelay. So, now we're not going to have that problem. Like I said, it's actually kind of hard,

02:47 oh, we don't need that false in there either, ha ha. Like I said, it's kind of hard for me to reproduce the situation here of when you could see a flash of loading state, but useSpinDelay was built specifically to avoid that flash of pending state, and so that's why we are going to use it. Let's see if I can kind of simulate that.

03:05 So, it's taking a second, taking a second, and I click it. Hey, yeah, maybe, I don't know, hard to reproduce, but definitely could happen, and worth including useSpinDelay. It's a really small library, and definitely I pretty much use it always when I'm using useTransition. So, there you go. Now, we have a really nice loading experience.

03:24 We can preload it. One other thing that I will mention is that you could actually say load globe right here, just call it, so that it doesn't wait until we get focus or point or enter. It also doesn't come with the initial payload, so this can kind of happen in the background.

03:45 Maybe not the most optimal way to load this resource, but if you really wanted to kick off the loading of that resource quickly, then yeah, you could do it that way too. All right, I think that you did a good job.