From 83ff2dd810066c263d9b07faa66efd7d97cc20f9 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Tue, 10 Aug 2021 14:37:33 +0530
Subject: [PATCH] Fix onAdd

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 src/platform/web/ui/general/LazyListView.js | 29 +++++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/platform/web/ui/general/LazyListView.js b/src/platform/web/ui/general/LazyListView.js
index aa38a4fb..c4a1c6b9 100644
--- a/src/platform/web/ui/general/LazyListView.js
+++ b/src/platform/web/ui/general/LazyListView.js
@@ -43,6 +43,8 @@ class ItemRange {
     }
 
     containsIndex(idx) {
+        // TODO: Replace by lastIndex
+        // TODO: Should idx be <= since lastIndex is not rendered?
         return idx >= this.topCount && idx <= (this.topCount + this.renderCount);
     }
 
@@ -170,7 +172,7 @@ export class LazyListView extends ListView {
         if (this._height === 0) { console.error("LazyListView could not calculate parent height."); }
         const initialRange = this._getVisibleRange();
         const initialRenderRange = initialRange.expand(this._overflowItems);
-        this._renderRange = new ItemRange(0, 0, 0);
+        this._renderRange = new ItemRange(0, 0, initialRange.bottomCount + 1);
         this._renderElementsInRange(initialRenderRange);
     }
 
@@ -219,7 +221,6 @@ export class LazyListView extends ListView {
         const diff = this._renderRange.diff(range);
         const renderedItems = this._itemsFromList(diff.toAdd);
         this._adjustPadding(range);
-
         const {start, end} = diff.toRemove;
         const normalizedStart = this._renderRange.normalize(start);
         this._childInstances.splice(normalizedStart, end - start + 1).forEach(child => this._removeChild(child));
@@ -265,9 +266,27 @@ export class LazyListView extends ListView {
         child.unmount();
     }
 
-    // If size of the list changes, re-render
-    onAdd() {
-        this._renderIfNeeded(true);
+    onAdd(idx, value) {
+        const {topCount, renderCount, bottomCount} = this._renderRange;
+        if (this._renderRange.containsIndex(idx)) {
+            const normalizedIdx = this._renderRange.normalize(idx);
+            if (bottomCount === 0) {
+                // We're completely scrolled; so the extra element needs to be removed from top
+                this._removeChild(this._childInstances.shift());
+                this._renderRange = new ItemRange(topCount + 1, renderCount, bottomCount);
+            }
+            else {
+                // Remove the last element, render the new element
+                this._removeChild(this._childInstances.pop());
+                this._renderRange = new ItemRange(topCount, renderCount, bottomCount + 1);
+            }
+            super.onAdd(normalizedIdx, value);
+        }
+        else {
+            this._renderRange = idx < topCount ? new ItemRange(topCount + 1, renderCount, bottomCount):
+                                                 new ItemRange(topCount, renderCount, bottomCount + 1);
+        }
+        this._adjustPadding(this._renderRange);
     }
 
     onRemove() {