perf: Implement atomic Grid Body updates via explicit suspension flag (#8989)

Author: tobiu

src/grid/Body.mjs

@@ -347,8 +347,6 @@ class GridBody extends Container {
         value > 0 && this.updateMountedAndVisibleColumns()
     }
 
-
-
     /**
      * Triggered after the isScrolling config got changed
      * @param {Number} value
@@ -566,8 +564,13 @@ class GridBody extends Container {
      * @param {Boolean} silent=false True to suppress the final VDOM update (used when batching).
      */
     createViewData(silent=false) {
-        let me                   = this,
-            {mountedRows, store} = me,
+        let me = this;
+
+        if (me.skipCreateViewData) {
+            return
+        }
+
+        let {mountedRows, store} = me,
             endIndex, i, item, itemIndex, poolSize, range;
 
         if (

src/grid/ScrollManager.mjs

@@ -11,9 +11,10 @@ class ScrollManager extends Base {
      * @static
      */
     static delayable = {
-        onBodyScroll     : {type: 'throttle', timer:  16},
+       // onBodyScroll     : {type: 'throttle', timer:  10},
         onBodyScrollEnd  : {type: 'buffer',   timer: 150},
-        onContainerScroll: {type: 'throttle', timer:  16}
+       // onContainerScroll: {type: 'throttle', timer:  16},
+        syncGridBody     : {type: 'throttle', timer:  10}
     }
 
     static config = {
@@ -94,14 +95,13 @@ class ScrollManager extends Base {
      * @protected
      */
     onBodyScroll({scrollTop}) {
-        let me   = this,
-            body = me.gridBody;
-
-        me.scrollTop = scrollTop;
+        let me = this;
 
-        body.set({isScrolling: true, scrollTop});
+        me.scrollTop           = scrollTop;
+        me.gridBody.isScrolling = true;
 
-        me.onBodyScrollEnd()
+        me.onBodyScrollEnd();
+        me.syncGridBody()
     }
 
     /**
@@ -117,19 +117,36 @@ class ScrollManager extends Base {
      * @param {Object} data.target
      */
     onContainerScroll({scrollLeft, target}) {
-        let me   = this,
-            body = me.gridBody;
+        let me = this;
 
         // We must ignore events for grid-scrollbar
         if (target.id.includes('grid-container')) {
-            body.isScrolling = true;
+            me.scrollLeft          = scrollLeft;
+            me.gridBody.isScrolling = true;
+
             me.onBodyScrollEnd();
+            me.syncGridBody()
+        }
+    }
 
-            me  .scrollLeft = scrollLeft;
-            body.scrollLeft = scrollLeft;
+    /**
+     * @protected
+     */
+    syncGridBody() {
+        let me   = this,
+            body = me.gridBody;
 
-            me.gridContainer.headerToolbar.scrollLeft = scrollLeft
-        }
+        body.skipCreateViewData = true;
+
+        body.set({
+            scrollLeft: me.scrollLeft,
+            scrollTop : me.scrollTop
+        });
+
+        body.skipCreateViewData = false;
+        body.createViewData();
+
+        me.gridContainer.headerToolbar.scrollLeft = me.scrollLeft
     }
 
     /**