Adding a Loading Spinner

[00:00:00]
>> Once we save that, if I set my status to pending nothing will really change. But we can see now that we've got extra styles in here. I guess we can't really, but there are extra style showing up. So I want to add my pending styles and I'm gonna do that up above.

[00:00:36]
And the way I want this to work is I only want the form to have these pending styles. So I'm just gonna set it to be position relative, cuz we're gonna do some fun stuff with overlays and disabling the form with CSS only. I always love doing the CSS stuff, because I feel like a lot of people who work in front-end dismiss CSS as being like, it's just the decoration that sits on top.

[00:00:58]
But there's so much you can do with it and there's so many things that you can add like we're going to build a loading spinner. And we're not gonna use any JavaScript for it. We're just gonna use CSS for that. So let's check our form.pending and we're gonna use a pseudo element called before and I'm gonna set the background to white.

[00:01:19]
I'm going to set the border radius to match the form so that it doesn't overlay outside of it to be 0.25 rem. And then I wanna set content because it's a pseudo element needs to exist, so we just set empty content on it. I'm gonna give it a height of 100% and a width of 100%.

[00:01:42]
Then I'm going to make it position absolute so that we can control exactly where it sits in relation to this form which we just set up as relative. And I just wanna make it top 0 and left 0, and what we should see here if I turn that off is it just overlay the whole form.

[00:02:04]
And so that will be a little bit jarring, it's like wait, did the site just break? So instead what we can do is we can mess with the opacity a little bit and I'm just gonna stick the opacity down here and make it let's say like 85%. Okay, that's a little better now it looks like it's intentionally disabled, not just hidden.

[00:02:27]
And the nice thing about this is that it makes it like I can't click on anything while I'm in here. So with just CSS we've just disabled the form. There are some issues that you'd wanna look at where I could keyboard now after this and enable it, but that's more for like production apps.

[00:02:46]
So you would wanna figure out how to disable entirely. So the next thing that I wanna do is I wanna add some things for when the form is pending, we'll set the after state. And I want to set the background to be a radial gradient. And we'll just use some RGBA values.

[00:03:08]
I'm gonna make it a kind of blue-ish color. And I'll make it start out transparent, and I'm going to have it fade up to 75% transparency. Then I'm going to set the border radius to 50. So we get a circle 50%, I'm gonna set the content to empty, So that it actually shows up.

[00:03:40]
I want the height of it to be about 6 rem and we want it to be circular, so the width is gonna be the same. I want again, to go position absolute but I want it to be centered. So the way that we can center it is we can go left and we can use the calc command.

[00:03:58]
And I'm gonna say that I want it to be 50% from the left, but I want it to be minus half of its width. So what we're doing is we're basically saying, be exactly centered based on your width. I'm gonna do the same thing from the top. Now we've got this kinda circle thing and that's okay, it's not really indicating loading though, so let's make it do that.

[00:04:19]
I'm gonna add some key frames. We'll call this key frame loading and I'm gonna go from an opacity of 1 and will transform it to be really teeny tiny. So we'll set scale of like one-tenth of 1%. And then I wanna set the two to an opacity of 0, so it's going to fade out as it gets bigger and we'll scale it up to its actual size.

[00:04:50]
And once we've saved that, I can come up here and just add an animation. And I want it to be the loading animation, I want it to take one second. I want it to continue for as long as it's visible, and we'll have it kind of slow down as it gets bigger using the ease out transition.

[00:05:07]
Now we've got a loading state, right? So it's pure CSS, it's disabled the form, it kinda looks like it's I mean, we've want a real designer to go in and make this actually look nice, but like this is pretty okay, right? For five minutes worth of effort and we didn't have to write any extra JavaScript.

[00:05:20]
So our app stayed lightweight. We're not doing a bunch of extra heavy JavaScript to stand up a spinning div or a loading div or anything. We're just using the platform for what it's built for. That then puts us in a position that we were ready to actually start transitioning between the states.

[00:05:40]
And so, let's make the form submission change the state, right? So to do that, I'm gonna create a new helper function down here and we will call it setStatus, and I'm gonna put it above this one. And what setStatus is gonna do is it's going to take a status field value and then it's going to dispatch a type of update status.

[00:06:10]
And it's going to send the new status as its value. To use this, we can just call it somewhere. So I want in my handle submit, I want to set the status depending as soon as we submit. So let's reset this Idle. And now when I submit, it goes into the pending state.

[00:06:35]
Cool, okay, get this good, this is what we want. And we haven't written our function yet so we aren't gonna be able to get a response. But let's kind of create the illusion of this will work. So I'm going to set time out down here, so that we can kinda fake it.

[00:06:55]
So we'll set the status to, let's try success at first and we'll do it after one second. So now, when I submit after a second it transitions to the success state and we see our success thing. If I change that to be error, submit, and something went wrong, okay?

[00:07:25]
So, good, we've got the functionality that we want. Now, the one last thing that I wanna show is in the success state, We don't have any way to get back without refreshing the page, right? So if I wanted to, for some reason, use this form as my primary email client, I needed to send more than one message, then I need a way to reset this.

[00:07:45]
So let's also add a reset capability in here. So the reset is just going to be the same as the default and we'll just say if we wanna reset we just send an action with a type of reset and that'll give us back our initial state which moves us to the idle state.

[00:08:03]
Which resets our forum, makes it visible and resets all the form values so that we're able to start typing fresh. So in here, we can then let's just add a button to our success state that lets us reset. So we've got our success state here and I'm going to just add a button below and we'll make it a type of reset and add an onClick.

[00:08:32]
So whenever someone clicks this button, what will happen is we're just gonna dispatch an event of the type reset. And let's give it a class name of we're gonna use stylesButton. And then because I know that this is also going to require centering, I'm gonna give it another class called stylesCentered, And the text will say reset, so that says reset.

[00:09:05]
Let's add a quick centered option here. Under my button, I can say button.centered, and we'll just say margin-left is auto, margin-right is auto, okay? And that's a little squishy up there, so let's do margin top of like 1 rem. Okay, perfect, and when I click this, it resets our form.

[00:09:33]
So if I add some values in here, and then I send it and then I reset it it's gonna clear those for us so that we can send multiple values. And that is a functioning state-managed thingy that will allow us to actually send and submit and track a visual state of this form.

[00:09:58]
So, now, let's save our work and we can actually make this thing do stuff.