So all of our islands are linked up here because they're named islands and they're all traveling together and that's great. Often you're using an island again to wall off an expensive part of a component. However, there's a behavior that's default with islands that sometimes you don't want. Okay, watch this. If I reload this entire page, it's still kind of slow because by default when an island renders

If I reload this entire page, it's still kind of slow because by default when an island renders for the first time, so when the page is loaded, when a new component is rendering on the page, it is going to load all of the islands along with the page. Then after it loads, the island becomes an island and all of its requests are isolated. But by default, this is so that you have something to show up when you load the page. Of course. So when I load this, it slows up the entire page.

to show up when you load the page. Of course. So when I load this, it slows up the entire page. I wanna make it so that these islands don't hold up the component at all. They let the component render first and then they come in after the fact. And how do we do this? Well, you might even guess what the prop name is. I'll show you. Watch this. It's very simple. We just say, I want all of these islands to be lazy.

I'll show you. Watch this. It's very simple. We just say, I want all of these islands to be lazy. And now this very much simulates the syntax and the experience of making an entire component lazy. We're just building on that precedent. So we have this lazy prop into these islands and now the page loads instantly and then the islands come in. And of course we don't want that page jank where nothing is shown and then it just pops into the page.

And of course we don't want that page jank where nothing is shown and then it just pops into the page. And just as this is the same with a live wire component, making a an entire component lazy. What do you do in that scenario? Well, you saw in a previous episode, I showed you the at placeholder directive for a component. We have access to the exact same thing for islands. So if you have a lazy island, you can say placeholder, whoops, placeholder, end placeholder.

So if you have a lazy island, you can say placeholder, whoops, placeholder, end placeholder. And then put something inside of there. In our case, let's put a loading skeleton. Okay, so now we have placeholder, placeholder with the skeleton and they're all lazy. And check that out. Now we get perfect loading skeletons for these individual parts of our component. This is huge, huge, huge, huge. Having lazy islands forget about every other feature

This is huge, huge, huge, huge. Having lazy islands forget about every other feature related to islands. Just being able to take some part of a component and make it lazy is incredibly powerful. Find the most expensive part of your component. Wrap it in an island. Throw lazy, true on it, and you're cooking with gas. It's awesome. Okay, there's lazy. Uh, this is getting a little bit weird,

It's awesome. Okay, there's lazy. Uh, this is getting a little bit weird, like why do we have three different islands and they all have the same name? This really should be one island. So we can do that really easily. Watch this. I am just going to take all of this and delete this and add three skeletons. And now this island is just one island, but it behaves the exact same

And now this island is just one island, but it behaves the exact same way and everything still works. It's still an island. You can still do wire island for other parts of the page. It's great. There's not much more to show you than that. It's a very simple feature. Oh, here's one more thing. So you can do lazy, but just like with a lazy component, it's waiting until it shows up on the page until it triggers that request.

it's waiting until it shows up on the page until it triggers that request. So if for whatever reason you had this way down deeper on the page, and I guess I can simulate this by saying like, I don't know, let's say a hundred vh. So a hundred vertical height. So now this is gonna be down here. It's not going to start triggering until I scroll into it. If you don't want that, you can say defer instead. And now let's try this again.

If you don't want that, you can say defer instead. And now let's try this again. Now when I scroll down, it's already loaded. Defer just means don't wait till the component or the island in this case enters the viewport to trigger itself. Just do it as soon as the page loads. So you'll see that if we open the dev tools, we reload. A deferred island is going to load in right after the page loads no matter what, where a lazy island,

A deferred island is going to load in right after the page loads no matter what, where a lazy island, there's no request at all until it comes into the viewport. Then it gets that request. So incredibly powerful as well. That's lazy islands. Yeah, you love them.