ng-virtual-list 19.11.1 → 19.11.2

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;
@@ -1078,6 +1079,7 @@ class TrackBox extends CacheMap {
     _resetBufferSizeTimer;
     _isReseted = true;
     _prerenderedCache = null;
+    _newItems = [];
     lifeCircle() {
         this.fireChangeIfNeed();
         this.fireTick();
@@ -1104,6 +1106,7 @@ class TrackBox extends CacheMap {
     updateCache(previousCollection, currentCollection, itemSize) {
         const trackBy = this._trackingPropertyName;
         let crudDetected = false;
+        this._newItems = [];
         if (!currentCollection || currentCollection.length === 0) {
             if (previousCollection) {
                 // deleted
@@ -1171,6 +1174,7 @@ class TrackBox extends CacheMap {
             const item = currentCollection[i], id = item[trackBy];
             if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) &&
                 !notChangedMap.hasOwnProperty(id)) {
+                this._newItems.push(id);
                 // added
                 crudDetected = true;
                 this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
@@ -1338,7 +1342,7 @@ class TrackBox extends CacheMap {
                     }
                 }
             }
-            let y = this._scrollStartOffset, stickyCollectionItem = undefined, stickyComponentSize = 0;
+            let y = this._scrollStartOffset, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
                 const ii = i + 1, collectionItem = collection[i], id = collectionItem[trackBy];
                 let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
@@ -1346,7 +1350,7 @@ class TrackBox extends CacheMap {
                     const cache = map.get(id);
                     componentSize = cache[sizeProperty] > 0 ? cache[sizeProperty] : typicalItemSize;
                     itemDisplayMethod = cache?.method ?? ItemDisplayMethods.UPDATE;
-                    const isItemNew = cache?.[IS_NEW] ?? (this._isLazy && isStart && !this._isReseted);
+                    const isItemNew = this._newItems.indexOf(id) > -1 || (this._isLazy && isStart && !this._isReseted);
                     isNew = isItemNew;
                     if (isNew) {
                         isUpdating = true;
@@ -1384,7 +1388,6 @@ class TrackBox extends CacheMap {
                     if (itemById === undefined) {
                         if (id !== fromItemId && id === stickyItemId && itemConfigMap?.[id]?.sticky === 1) {
                             stickyComponentSize = componentSize;
-                            stickyCollectionItem = collectionItem;
                             y -= stickyComponentSize;
                         }
                         if (id === fromItemId) {
@@ -1528,9 +1531,6 @@ class TrackBox extends CacheMap {
     refreshCache(cache) {
         this._prerenderedCache = cache;
     }
-    clearDeltaDirection() {
-        this.clearScrollDirectionCache();
-    }
     clearDelta(clearDirectionDetector = false) {
         this._delta = this._deltaOfNewItems = 0;
         if (clearDirectionDetector) {
@@ -1853,6 +1853,9 @@ class TrackBox extends CacheMap {
             this._prerenderedCache = null;
         }
     }
+    resetCacheChunkInfo() {
+        this._newItems = [];
+    }
     cacheClean() {
         this._map.clear();
         this._snapshot.clear();
@@ -5735,8 +5738,8 @@ class NgVirtualListComponent {
         $fireUpdate.pipe(takeUntilDestroyed(), tap(userAction => {
             hasUserAction = userAction;
         })).subscribe();
-        let renderStabilizerPrevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION, renderStabilizerUpdateIterations = 0;
         const $update = this.$update, renderStabilizer = (options) => {
+            let renderStabilizerPrevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION, renderStabilizerUpdateIterations = 0;
             const prepareIterations = options?.prepareIterations ?? PREPARE_ITERATIONS, prepareReupdateLength = options?.prepareReupdateLength ?? PREPARATION_REUPDATE_LENGTH;
             return of(null).pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(() => {
                 renderStabilizerPrevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION;
@@ -5769,6 +5772,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,
@@ -6042,11 +6048,26 @@ class NgVirtualListComponent {
                 this._$fireUpdate.next(true);
             }));
         })).subscribe();
+        let isChunkLoading = 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();
-            }));
+            isChunkLoading = true;
+            const scrollbar = this._scrollerComponent();
+            if (!!scrollbar) {
+                scrollbar.stopScrollbar();
+                scrollbar.refreshScrollbar();
+            }
+            return $actualItems.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
+                this._$fireUpdateNextFrame.next(true);
+            }), switchMap$1(() => $chunkLoadingRenderStabilizer.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
+                isChunkLoading = false;
+                this._trackBox.resetCacheChunkInfo();
+                const scrollbar = this._scrollerComponent();
+                if (!!scrollbar) {
+                    scrollbar.stopScrollbar();
+                    scrollbar.refreshScrollbar();
+                }
+            }))));
         })).subscribe();
         $loading.pipe(takeUntilDestroyed(), skip(1), distinctUntilChanged(), tap(v => {
             if (v) {
@@ -6064,7 +6085,7 @@ class NgVirtualListComponent {
             const scroller = this._scrollerComponent();
             let totalSize = 0;
             if (scroller) {
-                const collapsable = collapsedIds.length > 0, cachable = this.cachable, cached = this._cached, waitingCache = cachable && !cached, emitUpdate = !this._readyForShow || waitingCache || collapsable;
+                const collapsable = collapsedIds.length > 0, cachable = this.cachable, cached = this._cached, waitingCache = cachable && !cached, emitUpdate = !this._readyForShow || waitingCache || collapsable || isChunkLoading;
                 if (this._readyForShow || (cachable && cached)) {
                     const currentScrollSize = (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0), fireUpdate = emitUpdate || reupdate || (!optimization && !userAction) || this._$scrollingTo.getValue();
                     let actualScrollSize = !this._readyForShow && snapScrollToEnd ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
@@ -6138,23 +6159,22 @@ class NgVirtualListComponent {
                         this._trackBox.isScrollEnd;
                         return;
                     }
-                    if (scrollPositionAfterUpdate >= 0 && scrollPositionAfterUpdate < roundedMaxPositionAfterUpdate) {
-                        if (scrollSize !== roundedMaxPositionAfterUpdate || currentScrollSize !== scrollPositionAfterUpdate) {
-                            this._trackBox.clearDelta();
-                            if (this._readyForShow) {
-                                this.emitScrollEvent(true, false, userAction);
-                            }
-                            const params = {
-                                [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: true, userAction,
-                                fireUpdate, behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
-                            };
-                            scroller.scrollTo(params);
-                            if (emitUpdate) {
-                                this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
-                            }
+                    if ((scrollPositionAfterUpdate >= 0 && scrollPositionAfterUpdate < roundedMaxPositionAfterUpdate) ||
+                        (scrollSize !== roundedMaxPositionAfterUpdate || currentScrollSize !== scrollPositionAfterUpdate)) {
+                        this._trackBox.clearDelta();
+                        if (this._readyForShow) {
+                            this.emitScrollEvent(true, false, userAction);
+                        }
+                        const params = {
+                            [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: true, userAction,
+                            fireUpdate, behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
+                        };
+                        scroller.scrollTo(params);
+                        if (emitUpdate) {
+                            this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
                         }
-                        return;
                     }
+                    return;
                 }
                 if (emitUpdate) {
                     this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
@@ -6162,7 +6182,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,