HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 3: Infinite scroll
Lecture: Popular sites using infinite scroll
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Even if the term "Infinite Scroll" doesn't connect with you, if you're not exactly sure what this is,
0:05
you've definitely seen it. Popular social media sites like Facebook or Instagram, they don't have pages, you just keep scrolling,
0:13
especially on mobile. Similarly, with Twitter, here's my personal Twitter feed, and you can see if you just scroll,
0:21
the scroll bar is however big it is, but if you get to the bottom it's not done, it just pulls in more content and more content.
0:29
Even places like search engines, like Duck, Duck go, one of their options is to do infinite scroll for the search results.
0:35
I don't remember if this is the default, but if you go in here you can see like here's page one and page two
0:40
and they just put this divider, and you just keep scrolling, keep scrolling to figure out where the thing you're looking for goes up in the results.
0:46
So Infinite Scroll is very, very common. It's great on these sites that have tons of content and they really
0:53
don't end. How does that apply to our video collector app? Well, we have this feed. Remember we saw the feed, and it was really slow.
1:03
I had to pull it up, and it took about five seconds to render this feat of all of the videos on the site.
1:08
Well, first of all, do you want to show them all of the videos? Probably not, like let them go see the new ones and the popular ones and
1:14
then if they keep scrolling, just keep providing them more. So what we want to do is when they get to the end of the feed,
1:19
the ones we've displayed so far. We want to show this little, this bar thing at the bottom that's animated,
1:26
this little working, thinking type of animated thing as we're pulling in more videos and then boom
1:31
more of the videos just falling, and we just keep scrolling and keep scrolling. So that's what this chapter is about.
1:37
We're going to add that feature right there. This infinite scroll to the video feed, which shows the most recent or most popular videos,
1:44
something like that. I don't remember exactly what the sort is, but it shows all the videos on the site in some sort of ranked order.
1:50
Our video collector users are going to love it.