00:00 So, the transition stuff is pretty cool and all, but it does have some problems depending on the speed of your network or how long the suspending component is suspending. So, watch carefully. You might not catch this on the frame rate, so you may have to do this yourself. But if I click on Interceptor, you'll see it just flashed.

00:19 And if I click Galaxy Cruiser, boom, another flash. That does not look good. And what's flashing is that pending state. It's a flash of loading state. I despise flashes of loading state. I think that they're really ugly and make the app feel actually slower, even though the experience was really fast.

00:37 Now, one solution to this is just to delay when that loading state shows up and just say, okay, we'll put a CSS transition on it so that it shows up after like 200 milliseconds. But that doesn't help if the thing takes 250 milliseconds.

00:53 So you'll see a flash of loading state for those 50 milliseconds. So that's not cool. What you need is some mechanism that says if the loading takes less than like 300 milliseconds, don't show a spinner at all. If it takes longer than 300 milliseconds, then show the loading spinner for at least

01:09 like 350 milliseconds, even if the loading is shorter than that entire time. And so that's that's the idea. It's like, okay, we do want to delay it because that just makes sense. If it's super fast, then like there's no need to show a pending state.

01:24 But if it shows, then make sure it stays showing for at least a certain number of additional milliseconds. Otherwise, you get into a flash. And so that is what spin delay is all about. Interestingly, spin delay was built as a part of building my website for showing some pending

01:43 states without a flash of loading state because, yeah, I just despise it so much. So, yeah, really happy with Stefan for building new spin delay or spin delay. So the way that this works is you've got your transition and everything.

01:59 You just pass the Boolean to use spin delay and you can configure your delay and your min duration. They default to these values. I suppose that could change in the future. I pretty much almost always will configure this myself.

02:16 But then this Boolean that you get back is going to be true for following these rules. So it's going to, even though isPending turns to true, this will actually still be false for 300 milliseconds, or I guess for us it's 500 milliseconds here.

02:33 And then if it does turn true, so if isPending remains true for long enough, then this will change over to true after that 500 milliseconds for at least another 200 milliseconds. And so even if isPending turns to false after 600 milliseconds, showSpinner will remain

02:51 true for the full duration of our min duration. And if isPending stays true for a very long time, then showSpinner will remain true for that long as well. Hopefully that all makes sense, how that all works.

03:09 To avoid this flash of pending state, we are going to fix that right now. Should be pretty quick. See you when you're done.