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