Improve the UX with Pending UI
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.