on the dashboard that'll be article index and we're good to go so let's head over to the article index class first of all and let's take a look so how would we normally do this well we just pass this down from render there are a load of different ways that we can output data within alpine within live wire but we're going to go ahead and do this directly in here for now so

i'm going to go ahead and say articles and of course reference that article model and we're going to say latest which we can now do since we've set up our data really nicely and then we're just going to say yeah that's pretty much all we're going to do for now so obviously that's going to give us all of the articles on the page so over on the article index blade file we can now

now go ahead and just dump all of these out so it's the outer class here since we're using tau wind we're going to go ahead and say space y of eight and then in here this is where we want each of our articles so we're just going to go ahead and for each loop over each of these so for each articles as article and go ahead and end that for each down here and that's where our

articles are going to be displayed so as you can see we have got 100 articles on the page here obviously that's not what we want we don't want to display articles so let's create out an h2 in here and let's go ahead and style this up really quickly with some extra large text and font bold and then in here we're going to output obviously the article title but we while we are doing this

infinite scroll we really want to see the order of these to make sure that we have the correct order so we're going to go ahead and output the article id in here as well so article id and we should be good let's check it good okay so we're going from 100 all the way down to one perfect okay let's go ahead and create out a simple paragraph down here that's just going to output the article teaser

just so we're sort of bumping up the amount we have on this page and i even think if we head over to our dashboard we could probably just reduce the size of this a little bit just to kind of push it a little bit further just so we've got more room to scroll down here okay so we've got all the data on the page now now we're going to take a sneak peek at how we're actually going to

start to pull this together the key thing here is using pagination so obviously this is kind of natural we would use pagination if we wanted to show a first set of results and then a second set of results but usually these are spread between different pages and that's what we need to get around so we're going to go ahead and use the with pagination trait within this livewire component to

allow us to do this and then this is going to be paginated so we're going to go ahead and paginate this by 10 and we're just going to show the first 10 on the page so this is a obviously a good start we're only showing the first 10 we just need to figure out how to load more now what we're going to do inside of here is keep track of the pages that we're current or the page that we're currently

on we're not going to have this in the query string because with infinite scrolling we don't really want to update the query string we can do that but usually with infinite scrolling a user just expects to scroll down we don't expect to link to a certain position in our infinite scroll so we're going to go ahead and create our a integer in here just called page and of course i'm going

to set that to one and then in here we're going to go ahead and define where we want this to be on so with this uh with the paginator we can pass through several options to this the second one is which columns we want to select the next one is the query string and then the last one is the actual page that we're on so really this is the only thing that we're interested in okay so now

that we've done that that should just work as normal and we have this on each of the pages so now what we can do interestingly is when we do change this page we of course get a different set of results so we've gone from 100 to 91 and now we're going from 90 to 81 but that's not quite good enough obviously because what we're then doing is replacing the entire set of this data

so let's head over to the next episode create out a load more button to get this working and then from there we can go ahead and use our intersection observer just to invoke that method to load more in so in the next episode finally we'll get to the point where we can actually see this kind of infinite scrolling working