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

Talk Python's Mastodon Michael Kennedy's Mastodon