Transcript from the "Loading Spinner" Lesson
[00:00:00]
>> Brian Holt: There is other ones you can do, I think I've pulled up a CodePen here, some others. These are the things that people have done that are loading spinners, that are just kind of fun to see how they did them with CSS.
>> Brian Holt: I haven't looked at this one at all, so.
[00:00:20]
>> Brian Holt: These are quite advanced, so I don't expect you to know how to do things like this, that would take me a very long time, in fact, I'm not even sure if I could do that.
>> Brian Holt: But, cool stuff nonetheless, right? But what's cool about that, look, this person used zero JavaScript for that, this is all just done when using CSS.
[00:00:42]
Now granted, that's about 150 lines of CSS to do just that, but pretty cool. If I was gonna do a loading spinner for this, the first thing if someone called addDoggo, I'm just gonna put pseudo code in here, I would say, first thing I would do is show loading spinner, right?
[00:00:59]
As soon as someone clicks the button, that's when you wanna show the loading spinner. When do I stop showing the loading spinner?
>> Brian Holt: Here, stop showing loading spinner, right? As soon as it's done requesting, and it's being placed in the DOM, then we're gonna show the loading spinner.
[00:01:22]
Now, if you wanna go even one step further, which you don't have to,
>> Brian Holt: But as soon as this loads, and then you append the image to the DOM, that's actually when it was going to begin to load the picture, right? Because you get the URL back from the API, and then you add the image tag to the DOM, and then at that point it's going to request the photo.
[00:01:42]
That's also not instantaneous, right? So, if you stop showing the spinner right now, you're gonna have a bit of a gap between when you get the data back from the API and when the image actually loads, that makes sense to you?
>> Speaker 2: Why would that be the case if you're stopping showing the loading spinner after you've appended the image?
[00:02:02]
>> Brian Holt: So, let's take a look at this, if we go back and look at mine, wherever it is.
>> Brian Holt: Okay, so this page, notice as soon as I click it, there's going to be a one, just very small second, it's gonna show me the alt text.
>> Brian Holt: Because it appends that image to the DOM, and that image has not yet loaded, right?
[00:02:26]
So it actually has to go out and get this URL right there, it has to go request that from the server and get it back.
>> Brian Holt: So that's something to be aware of, there's ways to mitigate that, but for now let's just, expect that to happen for now.
[00:02:48]
>> Brian Holt: Okay? I do explain how to do it in there, if you want to, feel free. Do that definitely, as the very last thing that you do.