HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Implementing more videos on the server

Login or purchase this course to watch this video and the rest of the course contents.
0:00 We have everything set up right in terms of HTML and so on. The final thing to do is simply write the method that lives right here.
0:08 A view that will return the videos. Remember in the active search one we were supporting deep linking and all that kind of
0:15 stuff. And so I said really we're going to hit the same URL, the same view method under these different circumstances. So we had the case, we said,
0:23 well in the case that it's if vm is an htmx request, we're going to do something, but it's not exactly like that here. So we could go either way.
0:32 But what I'm gonna do is go and put a different URL here and that's going to look like page, and then we're going to pass over page and let's
0:41 call this just more_videos. So I'm going to have a separate additional, this will be the callback for when we get more.
0:50 It's kind of similar, but it's not exactly the same. So it's up to you. You could make it work. So what else is left to do?
0:56 Actually incredibly very little Let's go over here and say, I think we can say this is an int and then over here we can say
1:04 partials, and what do we have in that section? video_list. We can just say the response to what we're going to use is that partial view
1:17 remember not the whole thing, just this bit right there, which is exactly the fragment of an additional page of
1:24 videos to be dropped in and then possibly another trigger the next time and another trigger
1:30 the next time. But eventually that will go away, and we'll just put the last set of videos in. We're going to use that partial view right there and we
1:38 can go and say this is also an int, and then we can just say page equals page like that. That hopefully looked simple.
1:46 That should actually do it. We might have just completed this feature. Let's give it a try. Let's do it, a round a trip here.
1:52 So we go over there, gonna hit this view. One other thing before we do this,
1:58 hold on in order to actually see the indicator, to see something is happening.
2:03 Let's go down here and throw in a time.sleep for 0.25 or 250 milliseconds.
2:10 So we're going to do that because otherwise it's just gonna stream by and you won't actually see that anything is happening.
2:16 Let's go hit this feed, bam there's the first bit, I'm gonna scroll. Remember when you get past the third video,
2:22 the green one? It should kick in and get the next batch. So I'll come over here and show the run.
2:28 Let's clean that up. Here we go, a little bit more and look, did you see it? There they are.
2:34 Watch, I'll go quick this time, and you should see the indicator going it, See it? Oh we're going to need more time.
2:39 It's not even close to long enough, is it? Perfect, that's our infinite scroll, and it's just going right along.
2:45 I love it. And you can see right here back we're going get more videos page 2, 3, 4, 5, 6, 7, 8. Well we're this far down.
2:52 Let's see if there's any more, there's a few more, few more and that's it. The last one we got was Go
2:59 Python Go. And apparently there's 10 pages of videos. Every one of those came back with a 200, came out. OK, even though it's red,
3:06 that's just like the way the output gets colored in Flask. There you go. That's it.
3:10 That's the infinite scroll. Let's, let's give it one more little bit of polish. The only bit of polish is let's make this take longer.
3:16 So you can actually feel what it's like. Back home, go to the feed, then scroll. Working. Oh yeah, there it is.
3:25 That feels good. Obviously in a real app you want that to appear as fast as possible. So you wouldn't put that delay in.
3:32 Remember? We're running on localhost, not up to a server across the internet with pink time.
3:36 We're not hitting a real complex database we're just hitting an in memory database.
3:40 That's super fast. You would never put that time.sleep there in a real one but to demonstrate, simulate like the latency of the real world.
3:49 That's what we got. And that's our infinite scroll. Pretty awesome, right?

Talk Python's Mastodon Michael Kennedy's Mastodon