Fix race condition with shouldRecycle=false during fast scroll

Consolidates component removal, prepend, and append operations into a
single layout callback to prevent concurrent DOM manipulation that caused
"removeChild" and "Cannot read properties of null" errors.

Fixes #296

Author: johanrd

vertical-collection/addon/-private/data-view/radar/radar.js

@@ -104,6 +104,7 @@ export default class Radar {
     this._componentPool = [];
     this._prependComponentPool = [];
     this._appendComponentPool = []; // https://github.com/html-next/vertical-collection/issues/296
+    this._removeComponentPool = []; // Defer removal when shouldRecycle=false to avoid race condition
 
     // Boundaries
     this._occludedContentBefore = new OccludedContent(occlusionTagName);
@@ -615,8 +616,11 @@ export default class Radar {
           }
         }
       } else {
-        virtualComponents.removeObjects(_componentPool);
+        // When shouldRecycle=false, leave DOM untouched and defer virtualComponents removal
+        // to layout phase to avoid race condition with Glimmer VM.
+        this._removeComponentPool.push(..._componentPool);
         _componentPool.length = 0;
+        this._scheduleLayout();
       }
     }
 
@@ -640,6 +644,53 @@ export default class Radar {
         : '';
   }
 
+  _scheduleLayout() {
+    if (this._nextLayout === null) {
+      this._nextLayout = this.schedule('layout', () => {
+        this._nextLayout = null;
+
+        const {
+          virtualComponents,
+          _removeComponentPool,
+          _appendComponentPool,
+          _prependComponentPool,
+          _occludedContentBefore,
+          _occludedContentAfter,
+          _itemContainer,
+        } = this;
+
+        // Remove components from virtualComponents in layout phase (safe from race conditions)
+        if (_removeComponentPool.length > 0) {
+          virtualComponents.removeObjects(_removeComponentPool);
+          _removeComponentPool.length = 0;
+        }
+
+        while (_prependComponentPool.length > 0) {
+          const component = _prependComponentPool.pop();
+          const relativeNode =
+            _occludedContentBefore.realLowerBound.nextSibling;
+          insertRangeBefore(
+            _itemContainer,
+            relativeNode,
+            component.realUpperBound,
+            component.realLowerBound,
+          );
+        }
+
+        while (_appendComponentPool.length > 0) {
+          const component = _appendComponentPool.pop();
+          const relativeNode = _occludedContentAfter.realUpperBound;
+          insertRangeBefore(
+            _itemContainer,
+            relativeNode,
+            component.realUpperBound,
+            component.realLowerBound,
+          );
+        }
+      });
+    }
+  }
+
   _appendComponent(component) {
     const {
       virtualComponents,
@@ -668,26 +719,7 @@ export default class Radar {
       // 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,
-              );
-            }
-          });
-        }
+        this._scheduleLayout();
       }
     }
   }
@@ -716,27 +748,7 @@ export default class Radar {
       // Components that are both new and prepended 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
       _prependComponentPool.unshift(component);
-
-      if (this._nextLayout === null) {
-        this._nextLayout = this.schedule('layout', () => {
-          this._nextLayout = null;
-
-          while (_prependComponentPool.length > 0) {
-            const component = _prependComponentPool.pop();
-
-            // Changes with each inserted component
-            const relativeNode =
-              _occludedContentBefore.realLowerBound.nextSibling;
-
-            insertRangeBefore(
-              _itemContainer,
-              relativeNode,
-              component.realUpperBound,
-              component.realLowerBound,
-            );
-          }
-        });
-      }
+      this._scheduleLayout();
     }
   }