Current section: Scripting 7 exercises

Improve the UX with Pending UI


00:00 Remember how I talked about the fact that once you bring JavaScript in, it kind of makes some things good and other things worse, and that pending UI is the thing that it makes worse? Yeah, that's definitely a problem. So here, I can make this change, and I can submit, and it's super fast, and it's awesome. But I don't always have an awesome network connection. So if we kind of simulate a bad network connection

00:19 through this slow 3G preset, now, users don't typically have slow 3G, but they often have bad network connections. So we're going to simulate that with this. So if I remove those exclamation points and hit Submit, I get nothing, no feedback at all that something's going on. So maybe I'll try to hit Submit a bunch of times, and that would just be bad.

00:39 We'd be like spamming our own server. It's not good, it's awful. So we need to have some mechanism to show the user, hey, I see you, and I see what you're trying to do here, and I'm going to give you some sort of feedback to say, yes, you can, we are paying attention to your submission.

00:57 We're processing it right now. So having like a little spinner right there would be really helpful. And in fact, we do have a status button that allows us to show a current status, so success or error or pending. And so if you pass a status prop to this,

01:15 then you'll get the pending spinner. So I know it's emojis, we'll get to icons later. We're not going to do that today. We've just got emojis right now. But if we specify a status of pending, then we'll get that spinner. The trick will be, how do we know that we are currently pending?

01:33 And so that's what you're going to be doing in this exercise is figuring out how to know whether we're currently pending and then replacing this submit button with a status button so that we can give it the pending status so that we can get that spinner and give the user a much better user experience. So that's your task. I think you're going to have a good time with it,

01:52 and we'll see you when you're done.