Loading Effects

[00:00:00]
>> So Gatsby is showing us, it's building out everything that we need to show these placeholders. It's giving us modern fallbacks, it's giving us responsive images. And it's giving us a placeholder in case of JavaScript not being enabled. And we didn't have to do anything, we just had to put in this static image tag.

[00:00:20]
So that's kind of what I'm talking about, why Gatsby was so attractive to me when I first got into it was because specifically, I wanted this. I wanted to be able to not think about images but still get a great image experience. So if I build this, let's just go ahead and do an NPM run build.

[00:00:43]
And then once that's built, we'll serve it, Almost, there we go, now I can serve it. There we go, so we can open up this 9000 here. And if I, it may actually slow down the browser artificially. So I'm gonna switch this over to be throttling, let's make it fast 3G.

[00:01:11]
So the experience for somebody on a slow computer, if I come over here and hit Refresh, is, see how it's got that gray, and then the photo comes in. So that's the dominant color. We basically said, what is the main color in this image? Show me that. That can look really nice if you've got a lot of photos on a page, they all have subtly different colors, it can be really cool.

[00:01:33]
Another option that you have is, actually, let's play with a couple of these. But you can see in here, if I go in and let's disable JavaScript again. And if I disable JavaScript, we're still on 3G, you can see it still got in pretty quickly, we were able to get that image in.

[00:01:54]
And most importantly, note that even though we didn't have the placeholder, it still didn't cause the content to jump. Gatsby reserves the space of the image, so that the content is predictably the same size. And that prevents that content jitter, we're not seeing I think they call this cumulative layout shift.

[00:02:15]
We're reducing cumulative layout shift, which is something that makes Google very happy. So there we go again, got that nice fade in. Now let's try another approach here. I want to, instead of using dominant color, I want to use one of the other ones. Let's use blurred. And there's TypeScript autocomplete here so I just did Ctrl+Space, and it let me see all these options, so I'm gonna use blurred.

[00:02:46]
All right, so let's do blurred, I'm gonna build again, And the build should be much faster this time because we just built, which means all of that work that was done is cached. So this should happen much quicker this time than it did last time. Yeah, there it is, eight seconds to build that site this time, it's NPM run serve.

[00:03:09]
And now when we do this, it's a blurred image that fades in, right? So it's depending on the images, depending on what you're trying to do, you can get some really cool effects here. And let's just take a look at the last one which is traced SVG. This one got a lot of attention for a while, and then I don't know, I think people just stopped using it, I'm not sure why.

[00:03:32]
But I've always thought this is a pretty cool way to do it where it is going to take that image, find the edges and make like a two-color traced SVG. So it's pretty cool, so let's build that, there it goes, serve it, and isn't that cool? It kind of takes the image and does a little bit of jumping around to make it look like it's kind of coming in soon.

[00:04:02]
I've always thought that was a cool approach. But anyways, for our particular purposes, let's stick with the dominant color. I like that one. So I'm gonna close this served one and let's instead go back to NPM run develop. So static images are great for a lot of reasons, and the first and foremost is that they're very friendly to get started with.

[00:04:28]
All we have to do is import this static image component, and then use it like an image, we can even take all this off, if I, Let's get this running, there it is. Get out here, okay, so I can take all this off, let's just get rid of that, get rid of that.

[00:04:53]
So no custom anything, it just drops in that image, properly sized and doing all the things that we want. I just want it to have a little bit more style. So I'm gonna add those pieces in, and we get all the details that we want, right? That looks nice.