Fix minor issue that could lead to multiple loading

res/js/component/app.js

@@ -65,11 +65,14 @@ class App {
     insert(buffer) {
         this.resultContainer.appendChild(buffer.elem);
         buffer.addEventListener('loadMore', () => this.bufferLoadMore(buffer));
-        buffer.addEventListener('loadBefore', (context, initialLoad) => {
-            this.contextLoadBefore(buffer, context, initialLoad);
+        buffer.addEventListener('loadBefore', context => {
+            this.contextLoadBefore(buffer, context);
         });
-        buffer.addEventListener('loadAfter', (context, initialLoad) => {
-            this.contextLoadAfter(buffer, context, initialLoad);
+        buffer.addEventListener('loadAfter', context => {
+            this.contextLoadAfter(buffer, context);
+        });
+        buffer.addEventListener('loadInitial', context => {
+            this.contextLoadInitial(buffer, context);
         });
     }
     bufferLoadMore(buffer) {
@@ -86,36 +89,51 @@ class App {
             buffer.setLoading(false);
         });
     }
-    contextLoadBefore(buffer, context, initialLoad) {
-        if (context.loading && initialLoad !== true)
+    contextLoadBefore(buffer, context) {
+        if (context.loading)
             return;
         context.setLoading(true);
-        const amount = initialLoad ? 4 : 10;
         load('web/backlog/', statehandler.parse({
             buffer: buffer.id,
             anchor: context.anchorBefore,
             after: 0,
-            before: amount
+            before: 10
         })).then(result => {
             context.loadBefore(result.map(msg => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
             context.setLoading(false);
         });
     }
-    contextLoadAfter(buffer, context, initialLoad) {
-        if (context.loading && initialLoad !== true)
+    contextLoadAfter(buffer, context) {
+        if (context.loading)
             return;
         context.setLoading(true);
-        const amount = initialLoad ? 4 : 10;
         load('web/backlog/', statehandler.parse({
             buffer: buffer.id,
             anchor: context.anchorAfter,
-            after: amount,
+            after: 10,
             before: 0
         })).then(result => {
             context.loadAfter(result.map(msg => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
             context.setLoading(false);
         });
     }
+    contextLoadInitial(buffer, context) {
+        if (context.loading)
+            return;
+        context.setLoading(true);
+        load('web/backlog/', statehandler.parse({
+            buffer: buffer.id,
+            anchor: context.anchorAfter,
+            after: 4,
+            before: 4
+        })).then(result => {
+            const before = result.filter(msg => msg.id < context.anchorBefore);
+            const after = result.filter(msg => msg.id > context.anchorAfter);
+            context.loadBefore(before.map(msg => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
+            context.loadAfter(after.map(msg => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
+            context.setLoading(false);
+        });
+    }
 }
 const app = new App();
 document.body.insertBefore(app.elem, document.body.firstChild);
\ No newline at end of file

res/js/component/app.jsx

@@ -72,11 +72,14 @@ class App {
     insert(buffer) {
         this.resultContainer.appendChild(buffer.elem);
         buffer.addEventListener("loadMore", () => this.bufferLoadMore(buffer));
-        buffer.addEventListener("loadBefore", (context, initialLoad) => {
-            this.contextLoadBefore(buffer, context, initialLoad);
+        buffer.addEventListener("loadBefore", (context) => {
+            this.contextLoadBefore(buffer, context);
         });
-        buffer.addEventListener("loadAfter", (context, initialLoad) => {
-            this.contextLoadAfter(buffer, context, initialLoad);
+        buffer.addEventListener("loadAfter", (context) => {
+            this.contextLoadAfter(buffer, context);
+        });
+        buffer.addEventListener("loadInitial", (context) => {
+            this.contextLoadInitial(buffer, context);
         });
     }
 
@@ -93,39 +96,57 @@ class App {
         });
     }
 
-    contextLoadBefore(buffer, context, initialLoad) {
-        if (context.loading && initialLoad !== true)
+    contextLoadBefore(buffer, context) {
+        if (context.loading )
             return;
 
         context.setLoading(true);
-        const amount = initialLoad ? 4 : 10;
         load("web/backlog/", statehandler.parse({
             buffer: buffer.id,
             anchor: context.anchorBefore,
             after: 0,
-            before: amount
+            before: 10
         })).then((result) => {
             context.loadBefore(result.map((msg) => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
             context.setLoading(false);
         });
     }
 
-    contextLoadAfter(buffer, context, initialLoad) {
-        if (context.loading && initialLoad !== true)
+    contextLoadAfter(buffer, context) {
+        if (context.loading)
             return;
 
         context.setLoading(true);
-        const amount = initialLoad ? 4 : 10;
         load("web/backlog/", statehandler.parse({
             buffer: buffer.id,
             anchor: context.anchorAfter,
-            after: amount,
+            after: 10,
             before: 0
         })).then((result) => {
             context.loadAfter(result.map((msg) => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
             context.setLoading(false);
         });
     }
+
+    contextLoadInitial(buffer, context) {
+        if (context.loading)
+            return;
+
+        context.setLoading(true);
+        load("web/backlog/", statehandler.parse({
+            buffer: buffer.id,
+            anchor: context.anchorAfter,
+            after: 4,
+            before: 4
+        })).then((result) => {
+            const before = result.filter((msg) => msg.id < context.anchorBefore);
+            const after = result.filter((msg) => msg.id > context.anchorAfter);
+
+            context.loadBefore(before.map((msg) => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
+            context.loadAfter(after.map((msg) => new Message(msg.messageid, msg.time, msg.sender, msg.message)));
+            context.setLoading(false);
+        });
+    }
 }
 
 const app = new App();

res/js/component/buffer.js

@@ -84,17 +84,14 @@ class Buffer extends Component {
     insert(context) {
         let container = this.insertContainerFirst.childElementCount < 4 ? this.insertContainerFirst : this.insertContainer;
         container.appendChild(context.elem);
-        context.addEventListener('loadBefore', (context, initialLoad) => {
-            this.sendEvent('loadBefore', [
-                context,
-                initialLoad
-            ]);
+        context.addEventListener('loadBefore', context => {
+            this.sendEvent('loadBefore', [context]);
         });
-        context.addEventListener('loadAfter', (context, initialLoad) => {
-            this.sendEvent('loadAfter', [
-                context,
-                initialLoad
-            ]);
+        context.addEventListener('loadAfter', context => {
+            this.sendEvent('loadAfter', [context]);
+        });
+        context.addEventListener('loadInitial', context => {
+            this.sendEvent('loadInitial', [context]);
         });
         this.neverLoaded = false;
     }

res/js/component/buffer.jsx

@@ -84,11 +84,14 @@ class Buffer extends Component {
     insert(context) {
         let container = (this.insertContainerFirst.childElementCount < 4 ? this.insertContainerFirst : this.insertContainer);
         container.appendChild(context.elem);
-        context.addEventListener("loadBefore", (context, initialLoad) => {
-            this.sendEvent("loadBefore", [context, initialLoad])
+        context.addEventListener("loadBefore", (context) => {
+            this.sendEvent("loadBefore", [context])
         });
-        context.addEventListener("loadAfter", (context, initialLoad) => {
-            this.sendEvent("loadAfter", [context, initialLoad])
+        context.addEventListener("loadAfter", (context) => {
+            this.sendEvent("loadAfter", [context])
+        });
+        context.addEventListener("loadInitial", (context) => {
+            this.sendEvent("loadInitial", [context])
         });
         this.neverLoaded = false;
     }

res/js/component/context.js

@@ -37,8 +37,7 @@ class Context extends Component {
         if (focus === undefined)
             focus = !this.elem.classList.contains('focus');
         if (this.anchorBefore === this.message.id && this.anchorAfter === this.message.id) {
-            this.triggerLoadBefore(true);
-            this.triggerLoadAfter(true);
+            this.triggerloadInitial();
         }
         this.elem.classList.toggle('focus', focus);
         this.sendEvent('focus', focus);
@@ -52,17 +51,14 @@ class Context extends Component {
         this.containerAfter.insertBefore(message.elem, this.insertAfterTarget);
         this.anchorAfter = message.id;
     }
-    triggerLoadBefore(initialLoad) {
-        this.sendEvent('loadBefore', [
-            this,
-            initialLoad === true
-        ]);
+    triggerLoadBefore() {
+        this.sendEvent('loadBefore', [this]);
     }
-    triggerLoadAfter(initialLoad) {
-        this.sendEvent('loadAfter', [
-            this,
-            initialLoad === true
-        ]);
+    triggerLoadAfter() {
+        this.sendEvent('loadAfter', [this]);
+    }
+    triggerloadInitial() {
+        this.sendEvent('loadInitial', [this]);
     }
     loadBefore(elements) {
         this.beforeList = elements.concat(this.beforeList);

res/js/component/context.jsx

@@ -42,8 +42,7 @@ class Context extends Component {
             focus = !this.elem.classList.contains("focus");
 
         if (this.anchorBefore === this.message.id && this.anchorAfter === this.message.id) {
-            this.triggerLoadBefore(true);
-            this.triggerLoadAfter(true);
+            this.triggerloadInitial();
         }
 
         this.elem.classList.toggle("focus", focus);
@@ -61,12 +60,16 @@ class Context extends Component {
         this.anchorAfter = message.id;
     }
 
-    triggerLoadBefore(initialLoad) {
-        this.sendEvent("loadBefore", [this, initialLoad === true]);
+    triggerLoadBefore() {
+        this.sendEvent("loadBefore", [this]);
     }
 
-    triggerLoadAfter(initialLoad) {
-        this.sendEvent("loadAfter", [this, initialLoad === true]);
+    triggerLoadAfter() {
+        this.sendEvent("loadAfter", [this]);
+    }
+
+    triggerloadInitial() {
+        this.sendEvent("loadInitial", [this]);
     }
 
     loadBefore(elements) {