Pending UI Loading Spinner Exercise

[00:00:00]
>> For Exercise 7, 8 and 8, we're gonna be working with a arbitrarily slowed down user experience. I actually slowed down the back end a little bit so we can play around with this just to make it easier. So you don't have to do a slow 3G connection, but for the Exercise 7 and 8, the slowdown that we're trying to improve is actually the user's network.

[00:00:27]
For 9, we'll deal with, okay, what happens if you're the one who's slow? It's not the user, but it's you. But for seven and eight, we're gonna say, sometimes the users network is no good and you have no control over that. How do we make the users experience not just total trash with that type of environment?

[00:00:47]
So, we're gonna be using this handy little thing called Use Transition to show a loading spinner on our app. And we've got the loading spinner implemented for you. We do have a mini extra credit for this one to use a package called Spin Delay so you don't get a flash of loading state, which is kinda interesting.

[00:01:05]
So, ultimately where this loading spinner is gonna go, I think, let's also node dev 7, herein, so this will be port 4007, Kotty remix.run, Kotty loves you, and here we go. Yep, I was on a previous, the data is different between every workshop or every exercise. So, we have made the customer's route really slow.

[00:01:37]
If I click on customers, we're waiting, waiting, waiting! And finally, it loads. It's not a good experience if I'm in invoices and then go to go toccustomers are waiting, waiting, you'll see that the URL is updated. But it takes a while before we actually get to that. And the thing we made slow is getting these invoices, we're just making that piece really slow.

[00:01:57]
So yeah, we're just gonna deal with that, we're gonna pretend that this is the users network that causes us to be slow. The other thing that I wanted to mention about this, right. We already also have prefetching enabled, we learned about prefetching in the Remix Fundamentals Workshop and so if you hover over one of these links, this can take anywhere from three to five seconds I think, if you hover for a while, and then click, then it instantly transitions.

[00:02:28]
So, I believe that's actually even the case for the customers, so, if you hover over that for a second, and then click then it's instant. So, we have done a little bit, but we wanna make that loading experience better, even if we had about a fast back end because sometimes the user's network is no good.

[00:02:44]
And you're gonna put a loading spinner up here next to the FakeBooks logo. And I think that is everything that you need to know to be able to start working on this.