HTMX infinite scroll trigger all set.

Author: mikeckennedy

code/ch7_infinite_scroll/ch7_final_video_collector/templates/feed/index.html

@@ -5,7 +5,10 @@
 
         <h1>Video Collector: Recent Videos</h1>
 
-        {{ render_partial('feed/partials/video_list.html', videos=videos) }}
+        {{ render_partial('feed/partials/video_list.html',
+                videos=videos,
+                page=1,
+                has_more_videos=has_more_videos) }}
 
     </div>
 

code/ch7_infinite_scroll/ch7_final_video_collector/templates/feed/partials/video_list.html

@@ -7,4 +7,13 @@
         </a>
     </div>
 
-{% endfor %}
+{% endfor %}
+
+{% if has_more_videos %}
+    <div class="scroll-trigger htmx-settling"
+         hx-get="/feed/more_videos/{{ (page+1) }}"
+         hx-trigger="revealed"
+         hx-swap="outerHTML">
+        <img src="/static/img/bars.svg" width="150px" class="htmx-indicator"/>
+    </div>
+{% endif %}

code/ch7_infinite_scroll/ch7_final_video_collector/viewmodels/feed/feed_viewmodel.py

@@ -17,3 +17,4 @@ def __init__(self, page_size: int, page: int = 1):
         end = start + page_size
 
         self.videos: List[Video] = all_videos[start:end]
+        self.has_more_videos = len(all_videos) > end