fix: Resolve locked column VDOM thrashing and throttle pinning addon (#9485)

Author: tobiu

src/grid/Row.mjs

@@ -474,6 +474,36 @@ class Row extends Component {
             if (column.hideMode !== 'removeDom' || column.locked) {
                 isMounted = i >= mountedColumns[0] && i <= mountedColumns[1];
 
+                // Cell Recycling for Permanent Cells
+                if (recycle && oldCellMap) {
+                    let oldNode = oldCellMap.get(column.dataField);
+
+                    if (oldNode && oldNode.data?.recordId === recordId) {
+                        columnPosition = columnPositions.get(column.dataField);
+                        if (columnPosition) {
+                            oldNode.style.left  = columnPosition.x + 'px';
+                            oldNode.style.width = columnPosition.width + 'px';
+                            
+                            if (isMounted || column.locked) {
+                                if (columnPosition.hidden) {
+                                    oldNode.style.visibility = 'hidden'
+                                } else {
+                                    oldNode.style.visibility = null;
+                                    oldNode.style.display = null;
+                                }
+                            } else {
+                                if (column.hideMode === 'visibility') {
+                                    oldNode.style.visibility = 'hidden'
+                                } else if (column.hideMode === 'display') {
+                                    oldNode.style.display = 'none'
+                                }
+                            }
+                        }
+                        vdom.cn.push(oldNode);
+                        continue;
+                    }
+                }
+
                 cellConfig = me.applyRendererOutput({
                     cache,
                     cellId      : `${me.id}__${column.dataField}`,
@@ -498,7 +528,7 @@ class Row extends Component {
                 };
 
                 // Visibility Logic
-                if (isMounted) {
+                if (isMounted || column.locked) {
                     if (columnPosition.hidden) {
                         cellConfig.style.visibility = 'hidden'
                     }

src/main/addon/GridColumnScrollPinning.mjs

@@ -64,11 +64,13 @@ class GridColumnScrollPinning extends Base {
 
         // Apply CSS variables to the root container node for inheritance
         node.style.setProperty('--grid-locked-start-offset', `${scrollLeft}px`);
-        node.style.setProperty('--grid-locked-end-offset',   `${scrollLeft - (scrollWidth - clientWidth)}px`)
+        node.style.setProperty('--grid-locked-end-offset',   `${scrollLeft - (scrollWidth - clientWidth)}px`);
+
+        state.ticking = false;
     }
 
     /**
-     * Triggered by native browser scroll. Synchronous execution.
+     * Triggered by native browser scroll. Uses rAF to batch style recalculations.
      * @param {Event} event
      * @protected
      */
@@ -85,8 +87,9 @@ class GridColumnScrollPinning extends Base {
             }
         }
 
-        if (state) {
-            me.applyPinning(state)
+        if (state && !state.ticking) {
+            state.ticking = true;
+            requestAnimationFrame(() => me.applyPinning(state));
         }
     }
 
@@ -104,7 +107,8 @@ class GridColumnScrollPinning extends Base {
             me.registrations.set(id, {
                 id,
                 containerId,
-                containerNode
+                containerNode,
+                ticking: false
             });
 
             containerNode.addEventListener('scroll', me.boundOnScroll, {passive: true});