ng-virtual-list 20.11.4 → 20.11.5

package/fesm2022/ng-virtual-list.mjs

@@ -275,6 +275,7 @@ const PART_ITEM_FOCUSED = ' item-focused';
 const MIN_PIXELS_FOR_PREVENT_SNAPPING = 10;
 const MAX_VELOCITY_FOR_SCROLL_QUALITY_OPTIMIZATION_LVL1 = 74;
 const MAX_VELOCITY_FOR_SCROLL_QUALITY_OPTIMIZATION_LVL2 = 500;
+const MAX_NUMBERS_OF_SKIPS_FOR_QUALITY_OPTIMIZATION_LVL1 = 4;
 const RANGE_DISPLAY_ITEMS_END_OFFSET = 20;
 const PREPARE_ITERATIONS = 1;
 const PREPARATION_REUPDATE_LENGTH = 0;
@@ -1853,6 +1854,19 @@ class TrackBox extends CacheMap {
             this._prerenderedCache = null;
         }
     }
+    resetCacheFlags() {
+        const cache = this._map.toObject();
+        if (!!cache) {
+            for (const id in cache) {
+                const cacheItem = cache[id];
+                if (!!cacheItem) {
+                    const { width, height, method } = cacheItem;
+                    this.set(id, { width, height, method });
+                }
+            }
+            this._prerenderedCache = null;
+        }
+    }
     cacheClean() {
         this._map.clear();
         this._snapshot.clear();
@@ -5769,6 +5783,9 @@ class NgVirtualListComponent {
         }), $updateItemsRenderStabilizer = renderStabilizer({
             prepareIterations: PREPARE_ITERATIONS_FOR_UPDATE_ITEMS,
             prepareReupdateLength: PREPARATION_REUPDATE_LENGTH_FOR_UPDATE_ITEMS,
+        }), $chunkLoadingRenderStabilizer = renderStabilizer({
+            prepareIterations: PREPARE_ITERATIONS_FOR_UPDATE_ITEMS,
+            prepareReupdateLength: PREPARATION_REUPDATE_LENGTH_FOR_UPDATE_ITEMS,
         }), $collapseItemsRenderStabilizer = renderStabilizer({
             prepareIterations: PREPARE_ITERATIONS_FOR_COLLAPSE_ITEMS,
             prepareReupdateLength: PREPARATION_REUPDATE_LENGTH_FOR_COLLAPSE_ITEMS,
@@ -5953,38 +5970,6 @@ class NgVirtualListComponent {
                 return of({ items, collapsedIds, itemConfigMap, trackBy });
             }));
         }));
-        $itemsComposition.pipe(takeUntilDestroyed(), switchMap$1(({ items, collapsedIds, itemConfigMap, trackBy }) => {
-            if (items.length === 0 || !this._readyForShow || !(this.cachable && !this._cached &&
-                !this._trackBox.isSnappedToStart && this._trackBox.isSnappedToEnd)) {
-                return of({ items, collapsedIds, itemConfigMap, trackBy });
-            }
-            return $updateItemsRenderStabilizer.pipe(takeUntilDestroyed(this._destroyRef), take(1), debounceTime(0), switchMap$1(() => {
-                return of({ items, collapsedIds, itemConfigMap, trackBy });
-            }));
-        }), tap(({ items, collapsedIds, itemConfigMap, trackBy }) => {
-            const hiddenItems = new CMap();
-            let isCollapsed = false;
-            for (let i = 0, l = items.length; i < l; i++) {
-                const item = items[i], id = item[trackBy], group = (itemConfigMap[id]?.sticky ?? 0) > 0, collapsed = collapsedIds.includes(id);
-                if (group) {
-                    isCollapsed = collapsed;
-                }
-                else {
-                    if (isCollapsed) {
-                        hiddenItems.set(id, true);
-                    }
-                }
-            }
-            const actualItems = [];
-            for (let i = 0, l = items.length; i < l; i++) {
-                const item = items[i], id = item[trackBy];
-                if (hiddenItems.has(id)) {
-                    continue;
-                }
-                actualItems.push(item);
-            }
-            this._actualItems.set(actualItems);
-        })).subscribe();
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -6042,11 +6027,56 @@ class NgVirtualListComponent {
                 this._$fireUpdate.next(true);
             }));
         })).subscribe();
+        let chunkLoaded = false;
         const $loading = toObservable(this.loading);
         $loading.pipe(takeUntilDestroyed(), distinctUntilChanged(), skip(1), filter$1(v => !v), switchMap$1(() => {
-            return $actualItems.pipe(takeUntilDestroyed(this._destroyRef), debounceTime(100), take(1), tap(() => {
-                this._scrollerComponent()?.refreshScrollbar();
+            chunkLoaded = true;
+            const scrollbar = this._scrollerComponent();
+            if (!!scrollbar) {
+                scrollbar.stopScrollbar();
+                scrollbar.refreshScrollbar();
+            }
+            return $chunkLoadingRenderStabilizer.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
+                const scrollbar = this._scrollerComponent();
+                if (!!scrollbar) {
+                    scrollbar.stopScrollbar();
+                    scrollbar.refreshScrollbar();
+                }
+                chunkLoaded = false;
+                this._trackBox.resetCacheFlags();
+            }));
+        })).subscribe();
+        $itemsComposition.pipe(takeUntilDestroyed(), switchMap$1(({ items, collapsedIds, itemConfigMap, trackBy }) => {
+            if (chunkLoaded || items.length === 0 || !this._readyForShow || !(this.cachable && !this._cached &&
+                !this._trackBox.isSnappedToStart && this._trackBox.isSnappedToEnd)) {
+                return of({ items, collapsedIds, itemConfigMap, trackBy });
+            }
+            return $updateItemsRenderStabilizer.pipe(takeUntilDestroyed(this._destroyRef), take(1), debounceTime(0), switchMap$1(() => {
+                return of({ items, collapsedIds, itemConfigMap, trackBy });
             }));
+        }), tap(({ items, collapsedIds, itemConfigMap, trackBy }) => {
+            const hiddenItems = new CMap();
+            let isCollapsed = false;
+            for (let i = 0, l = items.length; i < l; i++) {
+                const item = items[i], id = item[trackBy], group = (itemConfigMap[id]?.sticky ?? 0) > 0, collapsed = collapsedIds.includes(id);
+                if (group) {
+                    isCollapsed = collapsed;
+                }
+                else {
+                    if (isCollapsed) {
+                        hiddenItems.set(id, true);
+                    }
+                }
+            }
+            const actualItems = [];
+            for (let i = 0, l = items.length; i < l; i++) {
+                const item = items[i], id = item[trackBy];
+                if (hiddenItems.has(id)) {
+                    continue;
+                }
+                actualItems.push(item);
+            }
+            this._actualItems.set(actualItems);
         })).subscribe();
         $loading.pipe(takeUntilDestroyed(), skip(1), distinctUntilChanged(), tap(v => {
             if (v) {
@@ -6162,7 +6192,7 @@ class NgVirtualListComponent {
             }
         };
         let prevItems = [];
-        const debouncedUpdate = debounce(update, 0);
+        const debouncedUpdate = debounce(update, 0, MAX_NUMBERS_OF_SKIPS_FOR_QUALITY_OPTIMIZATION_LVL1);
         $viewInit.pipe(takeUntilDestroyed(), filter$1(v => !!v), switchMap$1(() => {
             return combineLatest([$snapScrollToStart, $snapScrollToEnd, $bounds, $listBounds, $scrollEndOffset, $actualItems, $itemConfigMap, $scrollSize, $itemSize,
                 $collapsedItemIds, $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion, this.$fireUpdate,