Chapter: Feature 3: Infinite scroll
Lecture: Concept: Triggering another page as you scroll
0:00 Let's close out this chapter, this feature by reviewing how we rendered video results for a
0:06 single page and how we triggered the infinite scroll to get more pages down to the browser. So first of all,
0:13 I really hope you thought that partial section was awesome. I mean there's just so many use cases for these partial ideas.
0:20 in this one we're having our loop here, and actually we don't even have the HTML that we saw. We put that all into a separate partial block.
0:27 But we just say for each video render that video with its HTML as we already did. And this would show either all the videos on a single page or however
0:37 many were applied, but then we need our trigger. So in order to add the trigger, we come down here and we say add a div, or it could be anything,
0:44 it could be an image. It could be a hr you know, it doesn't matter like put an HTML element here and have 3
0:51 htmx hx attributes. hx-get so we go back to the server, feed_partial. Next page, gonna pass in you're currently on page 3 and if you need
1:02 more videos, go get 3 plus 1, or 4. The most important part, the infinite scroll aspect here is on revealed.
1:10 We put it at the bottom, and then we say if it's revealed, go get more. So that basically implements infinite scroll.
1:16 We scroll to the bottom, reveal is triggered, that gets us more. The next one of these triggers goes probably off-screen. Down below
1:24 again, you scroll to it. It's kind of like recursion and then finally an hx-swap.
1:28 So this whole section, this whole div here that contains this animated image, like working image and so on.
1:35 All of that is going to be replaced by basically regenerating this whole page. But with page equals plus 1. Final thing to do,
1:43 if you don't check that there are more pages, you're going to end up in this weird cycle where you get to the end and
1:49 it's hitting the server and giving you errors and possibly even returns another one of these triggers when you get this weird infinite loop type thing.
1:56 So be real careful to check the end the case, right? If there's no more just don't show this trigger.
2:00 So it's really easy to do, but it's also easy to forget and that's it,
2:04 that's how we used htmx, our idea of partials and this whole trigger with revealed to implement infinite scroll. I think it came out super,
2:13 super well. And again, htmx plus this idea of partials comes out with such incredibly clean Python web apps
2:20 that it just makes me smile to look at it. It's really nice.