So thus far you have seen the lion's share of island features. The ones I've shown you are the ones that you're gonna use a lot in a lot of your components to make them fast and reactive. But now I wanna show you one that's a little bit deeper that has more intricacies, but it unlocks something in live wear that was previously completely impossible. And you'll see what I mean in a second.

that was previously completely impossible. And you'll see what I mean in a second. So here's the analytics page. That's all island defied and we have this top post section that lists the first like five top posts. So I want to add a load more button down here, kind of an infinite pagination type thing where you can just hit load more and it'll show some more results

where you can just hit load more and it'll show some more results and then load more again and it'll show some more. And you can think about how you might build this in Livewire right now in kind of a naive way where you say load more and every time it increases the limit for that database query. But the problem with that is every time you hit load more, the database query gets bigger and bigger and bigger. The amount of HTML sent over the

the database query gets bigger and bigger and bigger. The amount of HTML sent over the wire gets bigger and bigger. Same with the amount of HTML patched into the page. It's just not pure. It's not just sending exactly what it needs to add to the bottom. And that's what we're gonna do. Okay, so let's start getting the ball rolling. We're gonna implement a basic load more.

so let's start getting the ball rolling. We're gonna implement a basic load more. That's not gonna work well right away, but you'll see what I mean. So let's start with the data. We're gonna say public and posts page equals one. And we'll put this in the URL bar for now. So we'll say URL and we'll track this up here so that we can see it kind of in the UI somehow.

and we'll track this up here so that we can see it kind of in the UI somehow. 'cause it's not a normal paginate, we won't see exactly what page we're on. Okay. And then down in top posts, this top post method that I have that's fetching 'em outta the database, it has a parameter for page. So we can do that. We can say page this arrow posts. Uh, nope, not post, post, post page. Did I name that right Post po?

Uh, nope, not post, post, post page. Did I name that right Post po? Do you already caught that right? You already knew that post page. Okay, post page is one post page for page. And then down here we're gonna add a method, public function load more posts. And then inside here we're just gonna increment that page. So posts page plus plus. Okay. And now we need a button. Why is it yelling at me?

So posts page plus plus. Okay. And now we need a button. Why is it yelling at me? I don't know why post page that exists, right? I don't know. I mean maybe you spotted and I don't, we'll see the, oh man, I'm full of them today. Load more posts. Let's make a button to actually load more posts. We scroll all the way down to our table right here and this is the four each loop of all the posts and right below the table I'm gonna add

and this is the four each loop of all the posts and right below the table I'm gonna add that load more button. It says load more right now it doesn't do anything but you can see it down here. So now we have the load more button, I click it, nothing happens. So let's wire it up. We say wire click equals load more posts. Okay? And now something should happen.

load more posts. Okay? And now something should happen. We should see the URL bar update with post page two and we should see the results change. So it works. Okay, so it's working. I hit load more and it is changing the page but it's not what we want because it's not appending them to the bottom. And this is where islands come in really clutch and make this really easy.

And this is where islands come in really clutch and make this really easy. So around this four each loop, I'm just gonna wrap this in an island and island down here, I'm gonna give it a name. So this is gonna be the posts island. And then next to wire click, because again, remember wire click is outside of the island. So when we click it, it doesn't know that it's associated with this island.

So when we click it, it doesn't know that it's associated with this island. So I'm gonna say wire island equals posts. Okay? So now this should be faster because it's not re rendering the whole page, it's just loading more posts. So it's working, it's great. It's still tracked in the URL bar. Perfect. But it's not appending the results. This is where a little feature that's a part of islands, it just, again, like I I, it's kind of anti-climactic,

This is where a little feature that's a part of islands, it just, again, like I I, it's kind of anti-climactic, but you add dot a pen to wire island and now you're saying, hey, when you click this button load more posts, I want you to associate it with the posts island. So make sure that you're re rendering that island. But instead of just replacing the content on the page, I want you to append the content on the page and watch this. So now I hit load more and it append it

I want you to append the content on the page and watch this. So now I hit load more and it append it and it does it just as fast as the last append, which is really powerful because this means that again, every time we hit load more, we're not loading all of the results and we're not sending all of them over the wire. We're just reloading that single island with that new page and appending that to the results. This is so powerful and so useful.

and appending that to the results. This is so powerful and so useful. You can use this for LLM chat interfaces where you're appending what the LLM is responding with as it responds. You can do infinite pagination, scroll based, infinite pagination. You can pre-end as well Instead of upend, I can show you a pre-end just for fun. Let's say pre-end, save that set post page back to one.

I can show you a pre-end just for fun. Let's say pre-end, save that set post page back to one. Okay, now I load more and you'll see that it got really weird. Like listen to your code is the first one and now it's not gonna be the first one because it's pre-end the results instead of upending them. So let's go back to upend. That's it in a nutshell. You have it in a nutshell. However, there are some problems. There are bugs in what we've built right now.

You have it in a nutshell. However, there are some problems. There are bugs in what we've built right now. This actually works pretty well in its current form for if like the whole page is just maybe a comments component that shows all the comments, you can hit load more and it's just gonna keep adding more, that's fine. But this page has a lot of other stuff going on and you'll see how this breaks down a little bit. So if I hit load more and now I have this stuff and then I change last 30 days to be last year

So if I hit load more and now I have this stuff and then I change last 30 days to be last year or last seven days, okay? So it re rendered the whole page but it didn't actually change what's listed here at all. It didn't touch any of these results. And if you remember, islands are islands. So when this whole page reloads, when we modify that period property, it's not re-entering the island at all. It's leaving it alone.

property, it's not re-entering the island at all. It's leaving it alone. And that's a bit of a problem because now when you update something about the metrics, like the the time period for them, it's not re rendering the results and that's not ideal. So how do we do that? Well, we could just throw an always true on there, right? We could say always true set post page back to one. Okay, load more. Now we hit last seven days, okay?

We could say always true set post page back to one. Okay, load more. Now we hit last seven days, okay? And okay, so that worked it it re-render the whole island fresh, right? But post page is still equal to two. So the results we get here are still the second page of results, which feels really weird 'cause we updated this. So let's go over here and let's make sure that when the period is updated we're resetting the post page.

and let's make sure that when the period is updated we're resetting the post page. So that's an easy thing to do in Livewire with updating hooks. We can say updating property and then we'll say when. So we'll say if property is equal to period, because that's the property for last seven days, last 30 days or whatever. So if we're updating the period property, I wanna make sure

last 30 days or whatever. So if we're updating the period property, I wanna make sure that we're always resetting post page back to one. Okay? There is actually a live wire thing called reset where you could just say posts page like this. If you don't want to hard code the one in there, we could do that. So let's do that. Okay, so now we go back to page one. We load our page, we hit load more. We're on page two. Now if we go to seven days,

We load our page, we hit load more. We're on page two. Now if we go to seven days, remember the first item is conditionals tell you up here, we change this and then it re-render. It goes back to page one and it shows us that. So we're pretty good and this, this might seem like all we need, however, I don't really like this because of that always true bit like I'm, I'm fine with that in this case I think it doesn't matter.

because of that always true bit like I'm, I'm fine with that in this case I think it doesn't matter. But if you think about it, well now if you update anything else down here, let's say this is part of a form or something. Let's say there's another reason to refresh the whole component. That island is always going to re-render, which can cause bugs. Let me see if I can, if I can actually demonstrate this bug.

which can cause bugs. Let me see if I can, if I can actually demonstrate this bug. I know we're into the weeds a little bit on this, but just kind of bear with me. So let's add a flux button and we'll just say refresh, okay? And then in here we'll say wire click equals refresh. Okay, so now we have this refresh component. We go to page two, okay, now we hit refresh. It's going to re-render the whole page. It's not gonna change the post page.

It's going to re-render the whole page. It's not gonna change the post page. That's still two, but it's gonna re-render our island. But it doesn't, it's not gonna append, it's not gonna know that it appended. We hit refresh and now look what happened. We re-render the whole component and we're still on page two, but we lost page one because we were appending the results and then we wiped it all out

because we were appending the results and then we wiped it all out and only rendered the last page of results, which doesn't feel right to me at all. So how do we keep this always true away so that this island is untouched? So when we're appending it, it's totally untouched. So that if we refresh, and let me show you that if I remove the always true, uh, we're on post page two.

and let me show you that if I remove the always true, uh, we're on post page two. Let's go back to post page one. Post page one. I add one here. Now I refresh and notice it doesn't touch anything in here. So that's good. But again, we lost that functionality where if I changed last seven days now it's not gonna work the way we want, right? Well here's a little hack, here's the hack for it. I know we're in the weeds. I know it feels like a lot.

Well here's a little hack, here's the hack for it. I know we're in the weeds. I know it feels like a lot. And again, this is next level stuff. This is islands 4 0 1, not 1 0 1. This is using and abusing islands to do really intricate things. So up here inside of updating we can say, Hey, anytime the period property is updated, we want you to reset the post page, but we also want you to re-render just that island.

to reset the post page, but we also want you to re-render just that island. So we can do that with this. There's a backend, uh, method called Render Island. Or we can say render the posts island. Okay? So now this is going to trigger a post island render anytime period is updating, but it's not gonna update the page for other reasons. Like if we had that, that refresh button at the bottom. So let's see if that fixed the problem.

Like if we had that, that refresh button at the bottom. So let's see if that fixed the problem. So let's go back to page one. Okay, we add a second page, we hit refresh over here and it doesn't touch any of our results. However, if we change this to a different result set, it is going to reset the post page back to one and re-render the island back with the initial results. So now we have pure load more functionality that isn't touched by the rest of the component.

So now we have pure load more functionality that isn't touched by the rest of the component. It's completely ignored it except for the parts that actually need to touch it, that actually need to say, Hey, when I am changed, I need you to re-render that island. Okay? That's it. You have seen islands from the ground up, you've seen them. Don't forget about how simple they can be because when we get into the weeds on 'em, you see a lot of complexity and you go, Ooh, that's a lot.

because when we get into the weeds on 'em, you see a lot of complexity and you go, Ooh, that's a lot. You don't have to touch any of this stuff, but it's there for you. It's there for you to do really, really powerful things because islands unlock things that were never possible in Livewire before. But you can use them to make a little part of your component lazy to make a little part of your component polling or isolated for an update.

of your component lazy to make a little part of your component polling or isolated for an update. If you have a form and you have a complicated select dropdown where you're searching users to assign them, that piece can be stuck in an island so that it's not bogging down the whole page and re rendering your whole form. You can just do it in one little part and it's still part of the whole component. So it can use the same data, the same lifecycle hooks,

and it's still part of the whole component. So it can use the same data, the same lifecycle hooks, the same properties, all that stuff. So that's islands from 1 0 1 to 4 0 1, simple to complicated. Um, they're incredibly powerful. Use them and abuse them.