fix(cdk/table): memory leak when no rows are sticky (angular#30461)

The table has some logic that queues up measurements of rows that will become sticky so that they can be measured once we set up the resize observer. Afterwards the queue is cleared once the measurements are done. angular#29814 introduced a memory leak where the tracking was happening even if the row isn't actually sticky which meant that the resize observer was never set up and the queue kept growing as new rows are rendered.

These changes resolve the leak by only queuing the measurement if it's necessary.

I've also fixed another potential leak where we were setting up the resize observer, but we weren't destroying it.

Fixes angular#30453.

Author: crisbeto

src/cdk/table/sticky-styler.ts

@@ -39,7 +39,7 @@ export class StickyStyler {
     ? new globalThis.ResizeObserver(entries => this._updateCachedSizes(entries))
     : null;
   private _updatedStickyColumnsParamsToReplay: UpdateStickyColumnsParams[] = [];
-  private _stickyColumnsReplayTimeout: number | null = null;
+  private _stickyColumnsReplayTimeout: ReturnType<typeof setTimeout> | null = null;
   private _cachedCellWidths: number[] = [];
   private readonly _borderCellCss: Readonly<{[d in StickyDirection]: string}>;
   private _destroyed = false;
@@ -128,24 +128,14 @@ export class StickyStyler {
     recalculateCellWidths = true,
     replay = true,
   ) {
-    if (replay) {
-      this._updateStickyColumnReplayQueue({
-        rows: [...rows],
-        stickyStartStates: [...stickyStartStates],
-        stickyEndStates: [...stickyEndStates],
-      });
-    }
-
+    // Don't cache any state if none of the columns are sticky.
     if (
       !rows.length ||
       !this._isBrowser ||
       !(stickyStartStates.some(state => state) || stickyEndStates.some(state => state))
     ) {
-      if (this._positionListener) {
-        this._positionListener.stickyColumnsUpdated({sizes: []});
-        this._positionListener.stickyEndColumnsUpdated({sizes: []});
-      }
-
+      this._positionListener?.stickyColumnsUpdated({sizes: []});
+      this._positionListener?.stickyEndColumnsUpdated({sizes: []});
       return;
     }
 
@@ -164,6 +154,14 @@ export class StickyStyler {
     let startPositions: number[];
     let endPositions: number[];
 
+    if (replay) {
+      this._updateStickyColumnReplayQueue({
+        rows: [...rows],
+        stickyStartStates: [...stickyStartStates],
+        stickyEndStates: [...stickyEndStates],
+      });
+    }
+
     this._afterNextRender({
       earlyRead: () => {
         cellWidths = this._getCellWidths(firstRow, recalculateCellWidths);
@@ -321,6 +319,7 @@ export class StickyStyler {
       clearTimeout(this._stickyColumnsReplayTimeout);
     }
 
+    this._resizeObserver?.disconnect();
     this._destroyed = true;
   }
 
@@ -493,11 +492,9 @@ export class StickyStyler {
     this._removeFromStickyColumnReplayQueue(params.rows);
 
     // No need to replay if a flush is pending.
-    if (this._stickyColumnsReplayTimeout) {
-      return;
+    if (!this._stickyColumnsReplayTimeout) {
+      this._updatedStickyColumnsParamsToReplay.push(params);
     }
-
-    this._updatedStickyColumnsParamsToReplay.push(params);
   }
 
   /** Remove updates for the specified rows from the queue. */