From b76c7e64276e336191f1ba6b769e95a1435671ca Mon Sep 17 00:00:00 2001
From: Ahamed Althaf <ahamed.althaf@freshworks.com>
Date: Tue, 1 Feb 2022 23:20:11 +0530
Subject: [PATCH] shouldRecycle=false breaks UI when scrolling the elements
 fast. Issue#296 (#299)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* shouldRecycle=false breaks UI when scrolling the elements fast. Issue#296

shouldRecycle=false breaks UI when scrolling the elements fast.

Issue#296

* shouldRecycle=false breaks UI when scrolling the elements fast. Issue #296

* Should render the appendComponentPool only if ‘shouldRecycle’ is false
---
 addon/-private/data-view/radar/radar.js | 26 +++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/addon/-private/data-view/radar/radar.js b/addon/-private/data-view/radar/radar.js
index c7a254db..4cc2a19b 100644
--- a/addon/-private/data-view/radar/radar.js
+++ b/addon/-private/data-view/radar/radar.js
@@ -105,6 +105,7 @@ export default class Radar {
 
     this._componentPool = [];
     this._prependComponentPool = [];
+    this._appendComponentPool = []; // https://github.com/html-next/vertical-collection/issues/296
 
     // Boundaries
     this._occludedContentBefore = new OccludedContent(occlusionTagName);
@@ -554,6 +555,8 @@ export default class Radar {
     const {
       virtualComponents,
       _occludedContentAfter,
+      _appendComponentPool,
+      shouldRecycle,
       _itemContainer
     } = this;
 
@@ -564,6 +567,29 @@ export default class Radar {
     } else {
       virtualComponents.insertAt(virtualComponents.get('length') - 1, component);
       component.rendered = true;
+
+      // shouldRecycle=false breaks UI when scrolling the elements fast. 
+      // Reference https://github.com/html-next/vertical-collection/issues/296
+      // Components that are both new and appended still need to be rendered at the end because Glimmer.
+      // We have to move them _after_ they render, so we schedule that if they exist
+      if(!shouldRecycle) {
+        _appendComponentPool.unshift(component);
+
+        if (this._nextLayout === null) {
+          this._nextLayout = this.schedule('layout', () => {
+            this._nextLayout = null;
+
+            while (_appendComponentPool.length > 0) {
+              const component = _appendComponentPool.pop();
+
+              // Changes with each inserted component
+              const relativeNode = _occludedContentAfter.realUpperBound;
+
+              insertRangeBefore(this._itemContainer, relativeNode, component.realUpperBound, component.realLowerBound);
+            }
+          });
+        }
+      }
     }
   }