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?