@ascentgl/ads-ui 21.94.0 → 21.96.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -8448,6 +8448,17 @@ class AdsTableComponent {
         this.uniqueColumnValuesCache = new Map();
         /** @ignore - Data version to invalidate unique values cache when rowData changes */
         this.dataVersion = 0;
+        /** @ignore - Cache for getProcessedColumnDefs() to avoid producing new array references on every CD cycle */
+        this._processedColDefsCache = [];
+        this._processedColDefsSrc = null;
+        this._processedColDefsConfigRef = null;
+        /** @ignore - Cache for getAgGridIcons() to avoid producing new object references on every CD cycle */
+        this._agGridIconsCache = null;
+        this._agGridIconsDirty = true;
+        /** @ignore - Number of list items to render synchronously on the first frame when toggling to list view */
+        this.INITIAL_LIST_RENDER_COUNT = 12;
+        /** @ignore - Handle for the pending rAF that fills the first batch, so it can be cancelled on destroy or re-toggle */
+        this._listRenderRafId = null;
         /** @ignore - Wrapper for getFilteredColumnValues that can be passed to filter menu */
         this.getFilterOptionsForFieldFn = (field) => {
             return this.getFilteredColumnValues(field);
@@ -8562,11 +8573,21 @@ class AdsTableComponent {
     /** @ignore */
     getProcessedColumnDefs() {
         const columns = this.tableColumnDefs();
+        // Return cached result if neither the column defs nor the sort/filter config reference changed.
+        // This prevents ag-grid from receiving a new array reference on every CD cycle
+        // (which would cause expensive internal column diffing even when the grid is hidden).
+        if (columns === this._processedColDefsSrc &&
+            this.columnSortFilterConfigs === this._processedColDefsConfigRef) {
+            return this._processedColDefsCache;
+        }
         if (!this.enableCustomSortFilter) {
+            this._processedColDefsSrc = columns;
+            this._processedColDefsConfigRef = this.columnSortFilterConfigs;
+            this._processedColDefsCache = columns;
             return columns;
         }
         // Import the custom header component dynamically
-        return columns.map(col => {
+        const result = columns.map(col => {
             const field = col.field || '';
             const config = this.getColumnSortFilterConfig(field);
             if (config) {
@@ -8594,6 +8615,10 @@ class AdsTableComponent {
             }
             return col;
         });
+        this._processedColDefsSrc = columns;
+        this._processedColDefsConfigRef = this.columnSortFilterConfigs;
+        this._processedColDefsCache = result;
+        return result;
     }
     /** @ignore */
     createComparator(config) {
@@ -8628,6 +8653,10 @@ class AdsTableComponent {
     }
     /** @ignore */
     ngOnChanges(changes) {
+        // Invalidate icons cache when icons input changes
+        if (changes['icons']) {
+            this._agGridIconsDirty = true;
+        }
         if (changes['defaultViewMode']) {
             const newViewMode = changes['defaultViewMode'].currentValue;
             const isListMode = newViewMode === 'list';
@@ -8968,9 +8997,28 @@ class AdsTableComponent {
     }
     /** @ignore - Toggle between grid view and list view */
     toggleView() {
+        // Cancel any pending progressive-render frame from a previous toggle
+        this.cancelListRenderRaf();
         this.isListView.update(v => !v);
         if (this.isListView()) {
-            this.refreshListView();
+            // Populate the full data cache immediately so sorting/filtering state is captured
+            this.listRowDataCache.set(this.getFilteredRowData());
+            // Render a small initial batch synchronously for instant visual feedback,
+            // then schedule the full batch size in the next animation frame.
+            // This splits the DOM creation across two frames and prevents the UI freeze
+            // that occurs when many complex list-item components are instantiated at once.
+            const total = this.listRowDataCache().length;
+            const initialCount = Math.min(this.INITIAL_LIST_RENDER_COUNT, total);
+            this.renderedListCount.set(initialCount);
+            if (initialCount < Math.min(this.listBatchSize, total)) {
+                this._listRenderRafId = requestAnimationFrame(() => {
+                    this._listRenderRafId = null;
+                    if (this.isListView()) {
+                        this.renderedListCount.set(Math.min(this.listBatchSize, this.listRowDataCache().length));
+                        this.cdr.detectChanges();
+                    }
+                });
+            }
         }
         else {
             this.listSentinelObserver?.disconnect();
@@ -8985,6 +9033,13 @@ class AdsTableComponent {
         }
         this.viewChanged.emit(this.isListView() ? 'list' : 'grid');
     }
+    /** @ignore - Cancel pending rAF for progressive list rendering */
+    cancelListRenderRaf() {
+        if (this._listRenderRafId !== null) {
+            cancelAnimationFrame(this._listRenderRafId);
+            this._listRenderRafId = null;
+        }
+    }
     /** @ignore - Refresh the list view data cache and reset rendered count */
     refreshListView() {
         this.listRowDataCache.set(this.getFilteredRowData());
@@ -9548,6 +9603,11 @@ class AdsTableComponent {
     }
     /** @ignore */
     getAgGridIcons() {
+        // Return cached icons if nothing changed — prevents ag-grid from receiving
+        // a new object reference on every change detection cycle.
+        if (!this._agGridIconsDirty && this._agGridIconsCache) {
+            return this._agGridIconsCache;
+        }
         const icons = {
             sortAscending: '<svg xmlns="http://www.w3.org/2000/svg" width="7" height="13" viewBox="0 0 7 13" fill="none">\n' +
                 '  <path d="M3.5 2.29227L5.12266 4.70574L1.87734 4.70574L3.5 2.29227Z" stroke-width="2"/>\n' +
@@ -9566,6 +9626,8 @@ class AdsTableComponent {
         if (this.icons) {
             Object.assign(icons, this.icons);
         }
+        this._agGridIconsCache = icons;
+        this._agGridIconsDirty = false;
         return icons;
     }
     /** @ignore */
@@ -9758,6 +9820,7 @@ class AdsTableComponent {
         this.resizeObserver?.disconnect();
         this.listSentinelObserver?.disconnect();
         this.observedSentinelEl = undefined;
+        this.cancelListRenderRaf();
         this.unsubscribeFromControls();
     }
     /** @ignore - serialize any cell value into a stable string key */