Added schedule.

src/snek/static/base.css

@@ -104,6 +104,7 @@ main {
 message-list {
   flex: 1;;
    height: 200px;
+   padding-bottom: 40px;
   overflow-y: auto;
 }
 .chat-messages {

src/snek/static/chat-window.js

@@ -1,10 +1,12 @@
 
 
 class ChatWindowElement extends HTMLElement {
+    receivedHistory = false
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
         this.component = document.createElement('section');
+        
         this.shadowRoot.appendChild(this.component);
     }
 
@@ -49,11 +51,10 @@ class ChatWindowElement extends HTMLElement {
         })
         const me = this
         channelElement.addEventListener("message",(message)=>{
-            console.info("ROCKSTARTSS")
-            setTimeout(()=>{
-            message.detail.element.scrollIntoView({behavior: 'smooth'})
-        },10)
+            message.detail.element.scrollIntoView()
+         
     })
+
         
     }
 

src/snek/static/message-list.js

@@ -9,11 +9,12 @@ class MessageListElement extends HTMLElement {
     room = null
     url = null
     container = null
+    messageEventSchedule = null 
+    observer = null 
     constructor() {
         super()
         this.attachShadow({ mode: 'open' });
         this.component = document.createElement('div')
-        
         this.shadowRoot.appendChild(this.component )
     }
     createElement(message){
@@ -40,6 +41,7 @@ class MessageListElement extends HTMLElement {
         element.appendChild(avatar)
         element.appendChild(messageContent)
 
+    
 
 
         message.element = element 
@@ -61,8 +63,12 @@ class MessageListElement extends HTMLElement {
         this.messages.push(obj)
         this.container.appendChild(element)
         const me = this 
-        this.dispatchEvent(new CustomEvent("message", {detail:obj,bubbles:true}))
         
+        this.messageEventSchedule.delay(() => {
+            me.dispatchEvent(new CustomEvent("message", {detail:obj,bubbles:true}))
+        })
+       
+
         return obj
     }
     scrollBottom(){
@@ -77,7 +83,7 @@ class MessageListElement extends HTMLElement {
         this.container = document.createElement('div')
         //this.container.classList.add("chat-messages")
         this.component.appendChild(this.container)
-        
+        this.messageEventSchedule = new Schedule(500)
         this.messages = []
         this.channel_uid = this.getAttribute("channel")
         const me = this

src/snek/static/schedule.js

@@ -0,0 +1,46 @@
+
+
+class Schedule {
+
+    constructor(msDelay) {
+        if(!msDelay){
+            msDelay = 100
+        }
+        this.msDelay = msDelay
+        this._once = false
+        this.timeOutCount = 0;
+        this.timeOut = null 
+        this.interval = null 
+    }
+    cancelRepeat() {
+        clearInterval(this.interval)
+        this.interval = null 
+    }
+    cancelDelay() {
+        clearTimeout(this.interval)
+        this.interval = null
+    }
+    repeat(func){
+        if(this.interval){
+            return false 
+        }
+        this.interval = setInterval(()=>{
+            func()
+        }, this.msDelay)
+    }
+    delay(func) {
+        this.timeOutCount++
+        if(this.timeOut){
+            this.cancelDelay()
+        }
+        const me = this 
+        this.timeOut = setTimeout(()=>{
+            clearTimeout(me.timeOut)
+            me.timeOut = null
+            func(me.timeOutCount)
+            me.cancelDelay()
+            me.timeOutCount = 0
+        }, this.msDelay)
+    }
+
+}

src/snek/templates/web.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Snek</title>
+  <script src="/schedule.js"></script>
   <script src="/app.js"></script>
   <script src="/models.js"></script>
   <script src="/message-list.js"></script>

src/snek/view/rpc.py

@@ -18,6 +18,7 @@ class RPCView(BaseView):
         async def get_messages(self, channel_uid,offset=0):
             messages = []
             async for message in self.services.channel_message.query("SELECT * FROM channel_message ORDER BY created_at DESC LIMIT 30"): #"SELECT uid, channel_uid, user_uid, message, created_at FROM channel_message WHERE channel_uid = :channel_uid ORDER BY created_at DESC LIMIT 30 OFFSET :offset",{"channel_uid":channel_uid,"offset":int(offset)}):
+                
                 print("JEEEHHH\n",flush=True)
 
                 user = await self.services.user.get(uid=message["user_uid"])
@@ -25,7 +26,7 @@ class RPCView(BaseView):
                     print("User not found!",flush= True)
                     continue
 
-                messages.append(dict(
+                messages.insert(0,dict(
                     uid=message["uid"],
                     user_uid=message["user_uid"],
                     channel_uid=message["channel_uid"],