Transcript from the "Loading Spinner Solution" Lesson
[00:00:00]
>> Brian Holt: Now this is fetching from the API. We wanna show a loading spinner, right, because if I'm using your website and I click on bulldog and nothing happens right away, I the user, I'm gonna assume that this is broken.
>> Brian Holt: In fact, it's not even changing, so it might actually be broken.
[00:00:20]
See, it just took a long time to request that picture, right? So anything that's not, there's some magic number, but it's basically if you don't respond to someone's interaction in a half second, a user's going to think it's broken. And they notice it, and they think it's broken.
[00:00:36]
Anything that you can do in less than 400 milliseconds, I think it's what it was, then the user can think it's instantaneous, it feels instantaneous, it feels quick to it. There's a lot of research around those kind of paradigms of thinking of what site's broken or not. So because this is likely going to take longer than 400 milliseconds we need to show the user that something's happening.
[00:00:58]
We need to acknowledge you did something and now I'm doing something, and you need to just sit down and wait for a second. So loading spinners are a good way of doing that. So we have to go create really quick some CSS on here. I don't have any CSS, I'm gonna call this styles.css.
[00:01:15]
And we talked a little bit about this, but let's just throw in some keyframes, spin to transform, rotate Z to 360 degrees. And we're gonna have loading-spinner. I'll just call it spinner. Font size, 50 pixels, that's a little bit bigger. It's gonna be text align, center, animation. I'm gonna have a go for two seconds, spin, linear, and I'm missing one thing, aren't I?
[00:02:10]
>> Brian Holt: We'll figure it out, and probably should be good for now. And we'll have it to say display none, initially. And then whenever it's like we put the show class on it, then we'll say display block.
>> Brian Holt: Also need infinite there, otherwise, it just does it once and stops.
[00:02:38]
Okay, so going back to our index.html, I have to include my link tag up here. That's gonna go to ./styles, and then here underneath this I'm gonna have a div. I'm gonna call this spinner, and I'm going to have it be the dog emoji.
>> Brian Holt: Okay, so if I come back over here to my Dog Viewer, wherever that one is, this one.
[00:03:17]
Shouldn't see it, right? Because I have,
>> Brian Holt: I have it display none, right, and then I'll show it whenever something's loading. So let's go back over to our code here.
>> Brian Holt: So whenever someone calls getDoggo, the first thing that we're gonna do, we're gonna have const spinner = document.querySelector('.spinner').
[00:03:57]
We're gonna say spinner.classList.add("show"), no dot here, just show. Okay, so when everyone starts requesting an animal then we'll show the loading spinner. Then as soon as we get the data message down here we're going to remove show.
>> Brian Holt: So line 65 there, and line 73, oops.
>> Brian Holt: So now hopefully if we come over here, and I've put like a picture on there, you'll see that the image here is not being hid but at least the loading spinner down there is being shown, right?
[00:04:49]
So next thing we're gonna have to do is we're gonna have to say,
>> Brian Holt: How do we wanna do this? I think we'll just do it the same way, we'll have dog-img here, but we'll also add show on this. So that way we can just reuse the same class on the styles.css, on our dog image.
[00:05:17]
>> Brian Holt: Above show, that's important. .dog-img, we'll have display none as well. So if we refresh over here it still should show the dog. But now, if we take away the show class, it's gonna hide the dog.
>> Brian Holt: And now we can say img.classList.remove("show").
>> Brian Holt: Same thing down here, except we're going to add show.
[00:05:54]
>> Brian Holt: And now hopefully if you change it it'll hide it. And you can see it's happening pretty quickly, but,
>> Brian Holt: So still not necessarily quite there, but in general, this is kind of where I expected you to get.