Chapter: Feature 3: Infinite scroll
Lecture: Reorganizing the feed HTML for infinite scroll
0:00 Welcome to chapter 7. That means a new bit of source control,
0:04 a new part of our code.
0:06 So here you can see ch7_infinite_scroll and we're doing the final one.
0:10 Again, we have the starter and the final just like always.
0:13 So what we're gonna do is we're gonna open up this project and let's just run
0:16 it really quick. We'll go over here and click on these little dots, and it's
0:23 gonna take a while for it to run.
0:24 And then eventually I'm gonna see all the videos,
0:27 there's no infinite scroll here, there's just all the videos.
0:31 So what we want to do is make it so it's quicker.
0:34 It'll just show a couple of the videos.
0:36 And then as we scroll, then,
0:38 as we sort of expose this part of the page,
0:40 it's gonna go back with htmx,
0:43 go to the server and say give me the next three videos, then the next three
0:46 or however many we decide to put in a block of you might think of as
0:50 a page. It really is just this one long list. Now to do this,
0:54 we need to organize our HTML a little bit.
0:57 This is the entire page of what we just saw here.
1:01 So we've got Video Collector: Recent Videos and then it has the title,
1:05 the picture and a link. If we click it, it will go over and play this
1:09 video, and then we just loop over that and that's the whole thing.
1:16 So here's the header, here's looping over all the videos and each individual video, here's
1:21 a video block. So we've got the title at the top, and we have a
1:26 hyperlink to play it locally. And then here's the image.
1:31 We can clean this up a little bit.
1:32 Remember we already have a couple of things like for example,
1:35 this image here, we have this partial of video images.
1:39 So instead of this, let's clean that up.
1:41 I'll just say
1:53 And then let's look and see what this wants.
1:55 Something called video. So we're gonna say video=v like that.
2:00 Alright, so again, this gets,
2:03 it's better re-use of our HTML.
2:04 It's not technically necessary yet. But let's just get this all cleaned up and get
2:08 the HTML as nice as we can so that we'll have everything working.
2:13 Let's go and refresh this page.
2:15 It should look exactly the same unless we broke something,
2:18 nope, nothing's changed. Okay,
2:20 that's good. We also have this element here which you could think of as a
2:26 block of videos and then here we have that whole list.
2:32 So what we can do is we can put this section here into a partial because
2:38 what's going to happen is we're going to render some, we're going to provide here,
2:42 the first bit of videos, the first batch of videos, and then we're going to
2:47 add a trigger down here with htmx.
2:50 And then we're going to need to run this again for the next batch and again
2:53 for the next batch and again for the next batch.
2:55 When you see that kind of pattern in htmx.
2:58 It means partial. So let's go over here, all the same pattern of having a
3:04 partials folder and let's just call this video_list or something like that.
3:15 And again, it's just gonna be this right here,
3:19 so move it over and then what we need to do is we're just gonna again
3:24 render_partial and remember over here,
3:32 it needs this videos, so we're going to just say videos=videos and we also have
3:38 the videos already here as that's what, what we got going into this one.
3:43 Alright, so again, this should look the same,
3:45 We rerun it, and we refresh it, and we wait the time that it takes.
3:49 It should be unchanged. Perfect.
3:53 Everything is exactly the same. But now we have the possibility of providing a smaller
3:58 set of videos here, Later on rendering this section,
4:03 which we can make a little nicer rendering this again and again,
4:06 as you scroll to the bottom of the page,
4:08 as the rule, trigger scrolls into view,
4:11 it looks like everything is set up and ready to go for adding infinite scroll with htmx