Scroll infinite.

src/snek/templates/web.html

@@ -55,6 +55,32 @@
             rect.right <= (window.innerWidth || document.documentElement.clientWidth)
         );
     }
+
+    const messagesContainer = document.querySelector(".chat-messages");
+    async function loadExtra() {
+    
+        const fourthMessage = messagesContainer.querySelector(".chat-messages :nth-child(4)");
+        if(!fourthMessage){
+            return
+        }
+        const firstMessage = messagesContainer.querySelector(".message:first-child");
+        if(fourthMessage.dataset.seen){
+            return 
+        }
+
+        if(isElementVisible(fourthMessage)){
+            fourthMessage.dataset.seen = true
+            console.info(channelUid, fourthMessage.dataset.created_at)
+            const messages = await app.rpc.get_messages(channelUid, 1, fourthMessage.dataset.created_at);
+            messages.forEach((message) => {
+                firstMessage.insertAdjacentHTML("beforebegin", message.html);
+            })
+            console.info(messages)
+        }
+    }
+    messagesContainer.addEventListener("scroll",()=>{
+        loadExtra()
+    });
     function updateLayout(doScrollDown) {
         const messagesContainer = document.querySelector(".chat-messages");
         //messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000;