Pending Flash

[00:00] All right, let's take care of this flash of pending state. You can control this a little bit if you come down here. So you could play around with the delay, like what if I want it to take 200 milliseconds? Then that's how long it's gonna take for each one of these. And so now it's not quite so much of a flash,

[00:17] though it is kind of, it's a brief thing. What if I want it to be 100 milliseconds? Okay, so now it is a bit more of a flash. And then here are 10 milliseconds. That is definitely a flash, like yikes, pretty bad. So the point is that you don't actually get to control this very well because you don't know what the user's network conditions are

[00:37] and so we want to have this in place for whatever those conditions are. So I'm going to rename this to isTransitionPending and then I'll have an isPending based on useSpendDelay. And we can configure this to be whatever we want.

[00:53] I'm gonna put the delay and minDuration to 350, so delay will be 300, minDuration is 350. That's what Peter, the product manager, wanted. And now with that, we are totally done. So now I click on this. You'll notice it happens so fast

[01:12] that we don't see any pending state. If I come down here and change this to be 350, now that is over our duration of 300. So we're gonna sit and we get that pending state, but you'll notice it doesn't instantly flash. So even though our delay is 300 milliseconds

[01:30] and our total delay for getting the ship is 350, we're not flashing it for 50 milliseconds, we're showing it for an additional 300 milliseconds thereafter. So it is a better user experience, 100%, way better. So I'm happy with this. I hope you're happy with it too.

[01:49] Feel free to futz around with this a little bit to see what the user experience is like now that we've got spend delay.

[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.

Suspense is key to managing async operations declaratively in React. 

It allows you to handle loading states, errors, and other async dependencies more smoothly by rendering a fallback while a promise is pending. 

In this workshop, you'll learn how to:

- Manage loading and errors with Suspense
- Cache promises and use the `useTransition` hook
- Update UI optimistically with `useOptimistic`
- Load images asynchronously with suspense 
- Keep UI responsive with `useDeferredValue`
- Optimize and avoid network waterfalls

Once you're through this workshop you'll have a solid handle on Suspense, which will really improve the UX of your apps and open doors to more advanced patterns in later workshops. 

## Data Fetching

No matter how fast your server is, you need to think about what the user's looking at while they wait. You also need to think about what happens if the request fails.

In this section you'll learn how to manage both of these declaratively in components using `Suspense` and `ErrorBoundary`.

## Dynamic Promises


Here you'll learn how to cache your promises in order to avoid unnecessary re-fetching. 

You'll also learn about transitions and how to make the transition from loading to resolved state smoother using the useTransition hook.


## Optimistic UI

The idea of "Optimistic UI" is based on the belief that most of the time the things your users do will be successful.

In this section you'll discover the useOptimistic hook, which is like useState that actually changes the UI even while it's suspended. 

## Suspense img

Anything async can be suspended, including images! 

This technique involves loading images with promises and using the browser’s native caching system. 

By combining async image loading with Suspense boundaries, you can control rendering fallbacks and ensure images are fully loaded before displaying updated content, avoiding stale UI states

## Responsive

You can run into some problems when using useTransition. For example, if the user is typing in a search box which you're controlling with state, you want to keep the `<input />`'s value up-to-date with what they're typing, not with the previous state while React is waiting for the transition to complete.

So in this section you'll learn how to use the useDeferredValue hook to  display some pending state while also allowing us to display the state that triggered a component to suspend.

## Optimizations

This section is about how to go chasing waterfalls.

Due to the design of Suspense, you can easily create network waterfalls by mistake. 

So what you're really be learning is how to deal with this both on the frontend and the backend. On the front you'll figure out how to trigger requests before use is called. And on the back you'll set cache headers on your responses to tell the client how to cache properly.

Learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

React Suspense

React Suspense

Transcript

Pending Flash

Transcript