Add infinity scrolling for /feeds

templates/base.html

@@ -9,7 +9,7 @@
     {% if author %}<meta name="author" content="{{ author }}" />{% endif %}
     {% if canonical %}<link rel="canonical" href="{{ canonical }}" />{% endif %}
     <title>{{ title|default:"FeedVault" }}</title>
-    <script src="{% static 'htmx.min.js' %}"></script>
+    <script src="{% static 'htmx.min.js' %}" defer></script>
     <style>
       html {
         max-width: 88ch;

templates/feeds.html

@@ -1,12 +1,5 @@
 {% extends "base.html" %}
 {% block content %}
     <h2>Latest Feeds</h2>
-    {% if feeds %}
-        {% for feed in feeds %}
-            <a href="{% url 'feed' feed.id %}">{{ feed.feed_url|default:"Unknown Feed" }} →</a>
-            <br>
-        {% endfor %}
-    {% else %}
-        <p>No feeds yet. Time to add some!</p>
-    {% endif %}
+    {% include "partials/feeds.html" %}
 {% endblock %}

templates/partials/feeds.html

@@ -0,0 +1,12 @@
+{% if feeds %}
+    {% for feed in feeds %}
+        <a href="{% url 'feed' feed.id %}">{{ feed.feed_url|default:"Unknown Feed" }} →</a>
+        <br>
+    {% endfor %}
+{% else %}
+    <p>No feeds yet. Time to add some!</p>
+{% endif %}
+<div hx-get="{% url 'feeds' %}?page={{ page|add:1 }}"
+     hx-trigger="revealed"
+     hx-target="this"
+     hx-swap="outerHTML">Loading...</div>