Chapter: Course conclusion and review
Lecture: Infinite scroll with htmx
0:00 The final fun feature we added with htmx was "Infinite Scroll".
0:04 And remember we added this to the video feed where we're showing basically all the videos
0:09 in the system, sorted. Now in our example,
0:12 there weren't so many videos that we couldn't actually put them on the page.
0:16 But if you have 1000 or 10,000 or a million or nearly unlimited amounts of content
0:22 obviously you need to do something like this.
0:25 So the idea was when you get to the bottom of the page,
0:28 that's going to trigger some sort of request to the server and as soon as that happens
0:32 we want to show an activity behavior so the user knows that it's not just
0:37 empty and then something will pop in but oh look,
0:39 it's working so we have this little set of gray bars and then goes to the server,
0:43 gets some more results. I called these fragments pages because it's kind of like
0:47 pagination but based on scrolling instead of a next previous type of navigation and that's it
0:53 That was infinite scroll. And again super straightforward to do with htmx.
0:57 We render the set of videos that were on that current page.
1:02 So here we have for v in videos,
1:03 render_partial off it goes. And then as long as there are more pages, we're
1:08 going to add this div. Remember it could be anything,
1:11 it could be an image. It could be basically any HTML element, but I chose
1:15 a div because that has no real visual representation.
1:18 It's going to have an hx-get /feed/partial for the next page.
1:22 So remember we're passing your current page to this partial view,
1:25 like you're on page 3. So if you get to the bottom of page 3
1:28 you need page 4 for the next set.
1:31 So we carry that forward through each request and then pass it back again.
1:35 The trigger, this is the infinite scroll aspect is revealed.
1:39 You scroll the bottom, it reveals this invisible piece here and off it goes.
1:44 And what we swap out is the outer HTML, completely replace it with basically recursively
1:50 calling this entire template with the next set of videos.
1:54 The other thing, here in orange that you see that we had,
1:57 that's the bars we didn't do anything special to make them appear.
2:00 They were just literally there at the bottom of the page.
2:03 But soon as they were visible to the user, that already kicked off the going and
2:08 getting the next page from the server.
2:10 If there's no more pages than we don't even show this.
2:13 So then the bars are gone. That's infinite scroll with htmx.