HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Returning a limited set of videos

Login or purchase this course to watch this video and the rest of the course contents.
0:00 The first thing to add "Infinite Scroll" is really on the server side.
0:03 We don't want to return all the videos.
0:05 We need to set up a way to return just some of the videos and then
0:09 some kind of htmx trigger to say if you get to the bottom
0:12 of this set, go get more.
0:15 So we're gonna go over here to the feed, and we've got our FeedViewModel
0:19 here and this is really why things have been slow.
0:23 This is just a small set of videos in memory.
0:25 It doesn't actually go slow at all.
0:26 So we've had to add this slowness to it.
0:29 We're going to come back and add that back in a moment.
0:32 We'll actually need that to see the progress indicators so
0:35 you can actually tell infinite scroll is working.
0:37 So what we need to do is we need to define how many pages we're going
0:41 to have that. So we'll have VIDEOS_PER_PAGE and let's set that to be 3
0:46 So instead of having all the videos, were just going to show 3,
0:50 if you scroll beyond those 3, we'll pull 3 more and then 3 more and then
0:54 maybe 2 more, then 0, depending on how many videos are,
0:58 whether they are divisible by 3 and so on.
1:00 So now this FeedViewModel,
1:02 if we go look at it, it looks incredibly simple, right?
1:04 It's just well here are all the videos but what we need to do is we
1:08 actually need to pass over a little more information like the number of videos per page
1:13 And what page it is. So we'll say page=1.
1:17 Let's be explicit here. Let's call this page_size like that.
1:23 Now those two don't exist yet, obviously.
1:25 So we can come down here and change the signature, default value
1:30 i's going to be None, and I guess we could even leave it on page
1:36 equals one by default.
1:38 There we go. So we're going to need to save this.
1:40 Obviously this is going to be an int,
1:42 and so is this, let's save these.
1:47 I'm not sure we'll need them later.
1:49 We could just work with them here,
1:50 but it's always kind of nice to have them.
1:55 Okay, It looks like it's all good.
1:57 Now the next thing we need to do is actually get those videos.
2:01 So let's create a variable here.
2:02 We can do refactor, introduce
2:04 variable. We'll say all_videos and the videos that we're going to return are actually a
2:10 subset of all the videos. Now,
2:12 in a real service, you would do this in the database or at the API level.
2:15 But remember this is a pretty wimpy data layer we got.
2:17 So we're just going to use a slice here.
2:19 So what we want to do is we want to go take the page minus one
2:23 So what page we're on times page_size all the way up to.
2:33 That's good. Store this here as a variable.
2:37 I will say start as that.
2:39 Now I have an end, start plus page size, that seems a little cleaner.
2:44 So we'll just do a slice start to end.
2:46 And that should give us, you know,
2:47 when we come to the first page, or the first 3 if we're passing in 3 for
2:50 page size and so on. Over here,
2:54 it looks like everything should be working.
2:55 We're now passing that information over.
2:57 Well, let's run it and find out.
3:00 We go and refresh. All right,
3:03 it worked and there it is.
3:05 Look at that exactly what we want.
3:09 So now we're just getting the first 3 and what we need to do next is
3:12 put some kind of indicators, some kind of trigger that will tell the system that
3:17 will tell htmx: OK, they got to the end, go get more if there are any.