keep filling gaps while viewport not filled or new content < 100px

src/ui/web/session/room/TimelineList.js

@@ -40,19 +40,38 @@ export class TimelineList extends ListView {
         this._viewModel = viewModel;
     }
 
-    async _onScroll() {
+    async _loadAtTopWhile(predicate) {
-        const root = this.root();
+        try {
-        if (root.scrollTop < 100 && !this._topLoadingPromise && this._viewModel) {
+            while (predicate()) {
-            const beforeFromBottom = this._distanceFromBottom();
+                // fill, not enough content to fill timeline
                 this._topLoadingPromise = this._viewModel.loadAtTop();
                 await this._topLoadingPromise;
-            const fromBottom = this._distanceFromBottom();
+            }
-            const amountGrown = fromBottom - beforeFromBottom;
+        }
-            root.scrollTop = root.scrollTop + amountGrown;
+        catch (err) {
+            //ignore error, as it is handled in the VM
+        }
+        finally {
             this._topLoadingPromise = null;
         }
     }
 
+    async _onScroll() {
+        const PAGINATE_OFFSET = 100;
+        const root = this.root();
+        if (root.scrollTop < PAGINATE_OFFSET && !this._topLoadingPromise && this._viewModel) {
+            // to calculate total amountGrown to check when we stop loading
+            let beforeContentHeight = root.scrollHeight;
+            // to adjust scrollTop every time
+            let lastContentHeight = beforeContentHeight;
+            // load until pagination offset is reached again
+            this._loadAtTopWhile(() => {
+                const contentHeight = root.scrollHeight;
+                const amountGrown = contentHeight - beforeContentHeight;
+                root.scrollTop = root.scrollTop + (contentHeight - lastContentHeight);
+                lastContentHeight = contentHeight;
+                return amountGrown < PAGINATE_OFFSET;
+            });
         }
     }
 
@@ -70,8 +89,16 @@ export class TimelineList extends ListView {
     loadList() {
         super.loadList();
         const root = this.root();
+        const {scrollHeight, clientHeight} = root;
+        if (scrollHeight > clientHeight) {
             root.scrollTop = root.scrollHeight;
         }
+        // load while viewport is not filled
+        this._loadAtTopWhile(() => {
+            const {scrollHeight, clientHeight} = root;
+            return scrollHeight <= clientHeight;
+        });
+    }
 
     onBeforeListChanged() {
         const fromBottom = this._distanceFromBottom();
@@ -84,8 +111,8 @@ export class TimelineList extends ListView {
     }
 
     onListChanged() {
-        if (this._atBottom) {
         const root = this.root();
+        if (this._atBottom) {
             root.scrollTop = root.scrollHeight;
         }
     }