Progressive Enhancement Exercise

[00:00:00]
>> Who's ready for exercise six? Me, [LAUGH] great, so we'll run node dev 6 and open up exercise six readme. This is what we're gonna start talking about progressive enhancement and let me just make sure there's nothing I need to mention. I'm just gonna I shout this out in the instructions, but I'm gonna mention it again.

[00:00:27]
There's a hook that you're gonna be using called useTransition, there's a hook in React called useTransition. We shipped first but they did like everybody knew it was gonna be used transition, we are going to rename this hook. It will probably be called useNavigation, I think. But yeah, just good to know when you're doing this if you do an auto import, make sure it's coming from remix, not from react.

[00:00:57]
Cuz they are completely different in what they do what they're for and yeah, it will not work if you're importing from react for that. Okay, other than that, I think you should be good with the instructions. The objective of this one is to add a loading state so that when you click on the Create button.

[00:01:16]
If you'll wanna simulate a slow network in your network tab, let me show you how to do that really quick actually. So, we're on port 4006, go to Post, Admin. And then, if you go open up your dev tools in the Network tab, there should be a way to throttle your network speed.

[00:01:35]
So you wanna go to slow 3G, this is the one aspects of your application you have zero control over, isn't that terrifying? That there's a part of your app you have no control over at all, yeah, that's what's so fun about the web. And so yeah, we're going to simulate a slow network experience and gives users a nice pending UI, that's the objective of this exercise.

[00:02:02]
In addition to that the extra credit is also to handle a slow network and that is to enable users to prefetch the content for these pages as the users interacting so that you don't wait until they click, but you actually can start loading the data ahead of time.