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.