Added infinite scroll

entry.py

@@ -16,12 +16,17 @@ def feed(page):
 
     posts = database.fetch("SELECT * FROM entry ORDER BY created_at DESC LIMIT ? OFFSET ?", [count, offset])
 
+    if len(posts) <= 0:
+        return """<div id="infinite-scroll-indicator">
+        <h2>YOU REACHED THE END!</h2>
+        </div>"""
+
     posts_with_usernames = []
     for post in posts:
         username = database.fetch("SELECT username FROM user WHERE uid = ?", [post[2]])
         posts_with_usernames.append(post + username[0])
 
-    return render_template("entry/feed.html", posts=posts_with_usernames)
+    return render_template("entry/feed.html", posts=posts_with_usernames, page=page)
 
 @app.route("/entry/create", methods=['GET', 'POST'])
 def newentry():

static/css/main.css

@@ -48,6 +48,9 @@ hr {
   transition: background-color 5s;
   transition-timing-function: ease-in; }
 
+#infinite-scroll-indicator {
+  text-align: center; }
+
 form {
   display: flex;
   flex-direction: column; }

static/css/main.scss

@@ -64,6 +64,10 @@ hr {
     transition-timing-function: ease-in;
 }
 
+#infinite-scroll-indicator {
+    text-align: center;
+}
+
 
 // // @font-face {
 // //     font-family: 'avenir';

templates/entry/feed.html

@@ -1,3 +1,4 @@
+Page No.: {{ page }}
 {% for p in posts %}
 
 <div class="entry">
@@ -14,3 +15,10 @@
 <hr>
 
 {% endfor %}
+
+<div id="infinite-scroll-indicator"
+    hx-get="/entry/feed/{{page+1}}"
+    hx-trigger="revealed"
+    hx-swap="outerHTML">
+    <h2>Loading more...</h2>
+</div>

templates/index.html

@@ -12,6 +12,6 @@
 
 <hr>
 
-<div hx-get="/entry/feed/0" hx-trigger="load, every 5s"></div>
+<div hx-get="/entry/feed/0" hx-trigger="load" hx-indicator="none"></div>
 
 {% endblock %}