ng-virtual-list 20.10.7 → 20.10.9

package/fesm2022/ng-virtual-list.mjs

@@ -142,7 +142,7 @@ const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
 const DEFAULT_COLLECTION_MODE = CollectionModes.NORMAL;
 const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
-const MAX_SCROLL_TO_ITERATIONS = 7;
+const MAX_SCROLL_TO_ITERATIONS = 5;
 const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
 const DEFAULT_SELECT_METHOD = MethodsForSelecting.NONE;
 const DEFAULT_SCREEN_READER_MESSAGE = 'Showing items $1 to $2';
@@ -637,7 +637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['maxClickDistance']
             }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
-const ZEROS_POSITION = -1000, NAVIGATE_TO_ATTEMT = 5, ATTR_AREA_SELECTED = 'area-selected', POSITION = 'position', POSITION_ZERO = '0', ID$1 = 'item-id', KEY_SPACE = ' ', KEY_ARR_LEFT = 'ArrowLeft', KEY_ARR_UP = 'ArrowUp', KEY_ARR_RIGHT = 'ArrowRight', KEY_ARR_DOWN = 'ArrowDown', EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown', CLASS_NAME_SNAPPED = 'snapped', CLASS_NAME_SNAPPED_OUT = 'snapped-out', CLASS_NAME_FOCUS = 'focus';
+const TRANSLATE_3D_HIDDEN = 'translate3d(-1000px,-1000px,0)', NAVIGATE_TO_ATTEMT = 5, ATTR_AREA_SELECTED = 'area-selected', POSITION = 'position', POSITION_ZERO = '0', ID$1 = 'item-id', KEY_SPACE = ' ', KEY_ARR_LEFT = 'ArrowLeft', KEY_ARR_UP = 'ArrowUp', KEY_ARR_RIGHT = 'ArrowRight', KEY_ARR_DOWN = 'ArrowDown', EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown', CLASS_NAME_SNAPPED = 'snapped', CLASS_NAME_SNAPPED_OUT = 'snapped-out', CLASS_NAME_FOCUS = 'focus';
 /**
  * Virtual list component.
  * Maximum performance for extremely large lists.
@@ -986,7 +986,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     hide() {
         const el = this._elementRef.nativeElement, styles = el.style;
         styles.position = POSITION_ABSOLUTE;
-        styles.transform = `${TRANSLATE_3D}(${this._data?.config?.isVertical ? 0 : ZEROS_POSITION},${this._data?.config?.isVertical ? 0 : ZEROS_POSITION},0)`;
+        styles.transform = TRANSLATE_3D_HIDDEN;
         styles.zIndex = HIDDEN_ZINDEX;
         if (this.regular) {
             if (styles.display === DISPLAY_NONE) {
@@ -1605,8 +1605,6 @@ const bufferInterpolation = (currentBufferValue, array, value, extra) => {
 var TrackBoxEvents;
 (function (TrackBoxEvents) {
     TrackBoxEvents["CHANGE"] = "change";
-    TrackBoxEvents["PREPARE"] = "prepare";
-    TrackBoxEvents["RESET"] = "reset";
 })(TrackBoxEvents || (TrackBoxEvents = {}));
 var ItemDisplayMethods;
 (function (ItemDisplayMethods) {
@@ -1744,10 +1742,6 @@ class TrackBox extends CacheMap {
     _resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
     _resetBufferSizeTimer;
     _isReseted = true;
-    _prepared = false;
-    _preparedToStart = false;
-    _preparedToStartIterations = 2;
-    get prepared() { return this._prepared; }
     lifeCircle() {
         this.fireChangeIfNeed();
         this.lifeCircleDo();
@@ -1763,12 +1757,7 @@ class TrackBox extends CacheMap {
         }
         const reseted = ((!this._previousCollection || this._previousCollection.length === 0) &&
             (!!currentCollection && currentCollection.length > 0));
-        if (this._isReseted !== reseted && reseted && this._prepared) {
-            this._prepared = false;
-            this.dispatch(TrackBoxEvents.PREPARE, false);
-        }
         this._isReseted = reseted;
-        this.dispatch(TrackBoxEvents.RESET, reseted);
         this.updateCache(this._previousCollection, currentCollection, itemSize);
         this._previousCollection = [...(currentCollection || [])];
     }
@@ -1897,7 +1886,7 @@ class TrackBox extends CacheMap {
     updateCollection(items, itemConfigMap, options) {
         const opt = { itemConfigMap, ...options }, dynamicSize = opt.dynamicSize, crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
         if (dynamicSize) {
-            this.cacheElements();
+            this.cacheElements(opt.isVertical, opt.itemSize);
         }
         this._defaultBufferSize = opt.bufferSize;
         this._maxBufferSize = opt.maxBufferSize;
@@ -1920,16 +1909,6 @@ class TrackBox extends CacheMap {
         }
         this._delta += metrics.delta;
         this.updateAdaptiveBufferParams(metrics, items.length);
-        if (!opt.dynamicSize || (this._preparedToStart && !this._prepared && this._previousTotalSize === metrics.totalSize)) {
-            this._prepared = true;
-            this.dispatch(TrackBoxEvents.PREPARE, true);
-        }
-        if (this._preparedToStartIterations > 0 && this._previousTotalSize !== metrics.totalSize) {
-            this._preparedToStartIterations--;
-        }
-        if (this._preparedToStartIterations === 0) {
-            this._preparedToStart = true;
-        }
         this._previousTotalSize = metrics.totalSize;
         this._deletedItemsMap = {};
         if (!dynamicSize) {
@@ -2222,6 +2201,20 @@ class TrackBox extends CacheMap {
         };
         return metrics;
     }
+    resetCache(collection, trackBy, isVertical, itemSize, bounds) {
+        const map = this._map;
+        for (let i = 0, l = collection.length; i < l; i++) {
+            const collectionItem = collection[i], id = collectionItem[trackBy];
+            if (map.has(id)) {
+                const cache = map.get(id), bSize = isVertical ? bounds.height : bounds.width;
+                map.set(id, {
+                    ...cache,
+                    width: isVertical ? cache.width : (cache.width <= itemSize || cache.width === bSize) ? itemSize : cache.width,
+                    height: isVertical ? (cache.height <= itemSize || cache.height === bSize) ? itemSize : cache.height : cache.height
+                });
+            }
+        }
+    }
     clearDeltaDirection() {
         this.clearScrollDirectionCache();
     }
@@ -2492,7 +2485,7 @@ class TrackBox extends CacheMap {
     _debouncedIsScrollStartOff = debounce(() => {
         this._isScrollStart = false;
     });
-    cacheElements() {
+    cacheElements(isVertical, itemSize) {
         if (!this._displayComponents) {
             return;
         }
@@ -2502,11 +2495,13 @@ class TrackBox extends CacheMap {
                 continue;
             }
             const bounds = component.instance.getBounds();
-            if (bounds.width && bounds.height) {
-                this.set(itemId, { ...this.get(itemId), ...bounds });
-                if (this._isLazy && (this._isScrollStart)) {
-                    this._debouncedIsScrollStartOff.execute();
-                }
+            this.set(itemId, {
+                ...this.get(itemId), ...bounds,
+                width: bounds.width || (isVertical ? 0 : itemSize),
+                height: bounds.height || (isVertical ? itemSize : 0),
+            });
+            if (this._isLazy && (this._isScrollStart)) {
+                this._debouncedIsScrollStartOff.execute();
             }
         }
     }
@@ -2999,7 +2994,7 @@ const easeLinear = (t) => {
     return t + t;
 };
 
-const DEFAULT_ANIMATION_DURATION = 500, ANIMATOR_MIN_TIMESTAMP = 20, MIN_ANIMATED_VALUE = 10;
+const DEFAULT_ANIMATION_DURATION = 500, ANIMATOR_MIN_TIMESTAMP = 1000 / 30, MIN_ANIMATED_VALUE = 10;
 class Animator {
     _animationId = 0;
     animate(params) {
@@ -3068,7 +3063,7 @@ const calculateDirection = (buffer) => {
     }
     return 1;
 };
-const TOP$1 = 'top', LEFT$1 = 'left', INSTANT$1 = 'instant', AUTO$1 = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, MAX_DIST = 12500, MAX_VELOCITY_TIMESTAMP = 100, SPEED_SCALE = 5, OVERSCROLL_START_ITERATION = 2;
+const TOP$1 = 'top', LEFT$1 = 'left', INSTANT$1 = 'instant', AUTO$1 = 'auto', SMOOTH = 'smooth', DURATION = 2000, FRICTION_FORCE = .035, MAX_DURATION = 4000, ANIMATION_DURATION = 50, MASS = .005, MAX_DIST = 12500, MAX_VELOCITY_TIMESTAMP = 100, SPEED_SCALE = 15, OVERSCROLL_START_ITERATION = 2;
 const SCROLL_EVENT$1 = new Event(SCROLLER_SCROLL), WHEEL_EVENT$1 = new Event(SCROLLER_WHEEL), SCROLLBAR_SCROLL_EVENT$1 = new Event(SCROLLER_SCROLLBAR_SCROLL);
 /**
  * NgScrollView
@@ -3241,7 +3236,7 @@ class NgScrollView {
                         if (this.scrollBehavior() === BEHAVIOR_INSTANT) {
                             return;
                         }
-                        this.moveWithAcceleration(isVertical, position, 0, v0, a0);
+                        this.moveWithAcceleration(isVertical, position, 0, v0, a0, timestamp);
                     }));
                 }));
             }));
@@ -3279,7 +3274,7 @@ class NgScrollView {
                         if (this.scrollBehavior() === BEHAVIOR_INSTANT) {
                             return;
                         }
-                        this.moveWithAcceleration(isVertical, position, this._velocity, v0, a0);
+                        this.moveWithAcceleration(isVertical, position, this._velocity, v0, a0, timestamp);
                     }));
                 }));
             }));
@@ -3288,9 +3283,6 @@ class NgScrollView {
     calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
         const currentPos = isVertical ? e.touches?.[e.touches?.length - 1]?.clientY || e.clientY : e.touches?.[e.touches?.length - 1]?.clientX || e.clientX, scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = this._startPosition + delta, position = Math.round(dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp), endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = prevClientPosition === 0 ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
         this.calculateAcceleration(velocities, v0, timestamp);
-        prevClientPosition = currentPos;
-        this.move(isVertical, position, true, true, true);
-        startTime = endTime;
         return { position, currentPos, endTime, scrollDelta };
     }
     cancelOverscroll() {
@@ -3361,8 +3353,8 @@ class NgScrollView {
                 continue;
             }
             if (v00) {
-                const a0 = timestamp < MAX_VELOCITY_TIMESTAMP ? (v00[1] !== 0 ? (lastVSign * Math.abs(Math.abs(v01[0]) - Math.abs(v00[0]))) / Math.abs(v00[1]) : 0) : 0;
-                aSum += a0;
+                const a0 = timestamp < MAX_VELOCITY_TIMESTAMP ? (v00[1] !== 0 ? (lastVSign * Math.abs(Math.abs(v01[0]) - Math.abs(v00[0]))) / Math.abs(v00[1]) : 0) : 0.1;
+                aSum = (aSum * MASS) + a0;
                 prevV0 = v01;
             }
             prevV0 = v01;
@@ -3377,8 +3369,8 @@ class NgScrollView {
     move(isVertical, position, blending = false, userAction = false, fireUpdate = true) {
         this.scroll({ [isVertical ? TOP$1 : LEFT$1]: position, behavior: INSTANT$1, blending, userAction, fireUpdate });
     }
-    moveWithAcceleration(isVertical, position, v0, v, a0) {
-        if (a0 !== 0) {
+    moveWithAcceleration(isVertical, position, v0, v, a0, timestamp) {
+        if (a0 !== 0 && timestamp < MAX_VELOCITY_TIMESTAMP) {
             const dvSign = Math.sign(v), duration = DURATION, maxDuration = MAX_DURATION, maxDistance = dvSign * MAX_DIST, s = (dvSign * Math.abs((a0 * Math.pow(duration, 2)) * .5) / 1000) / MASS, distance = Math.abs(s) < MAX_DIST ? s : maxDistance, positionWithVelocity = position + (this._inversion ? -1 : 1) * distance, vmax = Math.max(Math.abs(v0), Math.abs(v)), ad = Math.abs(vmax !== 0 ? Math.sqrt(vmax) : 0) * 10 / MASS, aDuration = ad < maxDuration ? ad : maxDuration, startPosition = isVertical ? this.y : this.x;
             this.animate(startPosition, Math.round(positionWithVelocity), aDuration, easeOutQuad, true);
         }
@@ -3937,7 +3929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['scrollBar', { read: NgScrollBarComponent }]
             }], scrollbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarEnabled", required: false }] }], scrollbarInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarInteractive", required: false }] }], focusedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedElement", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], startOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOffset", required: false }] }], endOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "endOffset", required: false }] }], scrollbarTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarTheme", required: false }] }], scrollbarMinSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarMinSize", required: false }] }] } });
 
-const MIN_SCROLL_TO_START_PIXELS = 10, RANGE_DISPLAY_ITEMS_END_OFFSET = 20, MIN_PREPARE_ITERATIONS = 15, EMPTY_SCROLL_STATE_VERSION = '-1', ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox', ITEM_ID = 'item-id', ITEM_CONTAINER = 'ngvl-item__container', READY_TO_START = 'ready-to-start', WAIT_FOR_PREPARATION = 'wait-for-preparation';
+const MIN_SCROLL_TO_START_PIXELS = 10, RANGE_DISPLAY_ITEMS_END_OFFSET = 20, MIN_PREPARE_ITERATIONS = 10, PREPARATION_REUPDATE_LENGTH = 15, RESET_CACHE_FRAME_NUMBER = 3, EMPTY_SCROLL_STATE_VERSION = '-1', ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox', ITEM_ID = 'item-id', ITEM_CONTAINER = 'ngvl-item__container', READY_TO_START = 'ready-to-start', WAIT_FOR_PREPARATION = 'wait-for-preparation';
 const validateScrollIteration = (value) => {
     return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
 }, validateId = (id) => {
@@ -4465,6 +4457,7 @@ class NgVirtualListComponent {
      * to adjust the sizes of the items in the unallocated area.
      */
     itemSize = input(DEFAULT_ITEM_SIZE, ...(ngDevMode ? [{ debugName: "itemSize", ...this._itemSizeOptions }] : [{ ...this._itemSizeOptions }]));
+    actualItemSize = signal(this.itemSize(), ...(ngDevMode ? [{ debugName: "actualItemSize" }] : []));
     _dynamicSizeOptions = {
         transform: (v) => {
             const valid = validateBoolean(v);
@@ -4701,7 +4694,8 @@ class NgVirtualListComponent {
         }
         const scroller = this._scrollerComponent();
         if (!!scroller) {
-            scroller.refresh(true, true);
+            const updatebale = this._readyToShow;
+            scroller.refresh(updatebale, updatebale);
         }
     };
     _onListResizeHandler = () => {
@@ -4714,6 +4708,9 @@ class NgVirtualListComponent {
         }
     };
     itemToFocus = (element, position, align = FocusAlignments.CENTER, behavior = BEHAVIOR_AUTO) => {
+        if (!this._readyToShow) {
+            return;
+        }
         const scroller = this._scrollerComponent();
         if (scroller) {
             const { width, height } = this._bounds(), { width: elementWidth, height: elementHeight } = element.getBoundingClientRect(), isVertical = this._isVertical, viewportSize = isVertical ? height : width, elementSize = isVertical ? elementHeight : elementWidth;
@@ -4781,8 +4778,6 @@ class NgVirtualListComponent {
         this._cacheVersion.set(v);
     };
     _cacheVersion = signal(-1, ...(ngDevMode ? [{ debugName: "_cacheVersion" }] : []));
-    _$prepared = new BehaviorSubject$1(false);
-    $prepared = this._$prepared.asObservable();
     _$update = new Subject();
     $update = this._$update.asObservable();
     _$isResetedReachStart = new BehaviorSubject$1(true);
@@ -4797,29 +4792,15 @@ class NgVirtualListComponent {
     $fireUpdateNextFrame = this._$fireUpdateNextFrame.asObservable();
     _$snapScrollToEndCanceller = new BehaviorSubject$1(false);
     $snapScrollToEndCanceller = this._$snapScrollToEndCanceller.asObservable();
-    _onTrackBoxResetHandler = (v) => {
-        if (v && this._scrollerComponent()?.scrollable) {
-            this._$isResetedReachStart.next(true);
-            const scroller = this._scroller()?.nativeElement;
-            if (scroller) {
-                const params = {
-                    [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0,
-                    behavior: BEHAVIOR_INSTANT,
-                    blending: false,
-                    fireUpdate: false,
-                    userAction: false,
-                    duration: this.animationParams().scrollToItem,
-                };
-                scroller.scrollTo(params);
-            }
-        }
-    };
-    _onPreparedHandler = (v) => {
-        this._$prepared.next(v);
-    };
     _destroyRef = inject(DestroyRef);
     _updateId;
     _scrollStateUpdateIndex = 0;
+    _readyToShow = false;
+    _isUserScrolling = false;
+    _prevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION;
+    _updateIterations = 0;
+    _$viewInit = new BehaviorSubject$1(false);
+    $viewInit = this._$viewInit.asObservable();
     getScrollStateVersion(totalSize, scrollSize, cacheVersion) {
         if (totalSize < scrollSize) {
             this._scrollStateUpdateIndex = this._scrollStateUpdateIndex === Number.MAX_SAFE_INTEGER ? 0 : this._scrollStateUpdateIndex + 1;
@@ -4831,8 +4812,6 @@ class NgVirtualListComponent {
         NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListComponent.__nextId + 1;
         this._id = NgVirtualListComponent.__nextId;
-        this._trackBox.addEventListener(TrackBoxEvents.RESET, this._onTrackBoxResetHandler);
-        this._trackBox.addEventListener(TrackBoxEvents.PREPARE, this._onPreparedHandler);
         this._service.initialize(this._trackBox);
         this._service.itemToFocus = this.itemToFocus;
         this._trackBox.displayComponents = this._displayComponents;
@@ -4865,34 +4844,133 @@ class NgVirtualListComponent {
             const dist = this.clickDistance();
             this._service.clickDistance = dist;
         });
-        let prepared = false, readyToStart = false, isUserScrolling = false;
-        let prevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION, updateIterations = 0;
-        const $updateComplete = this.$update.pipe(takeUntilDestroyed(), debounceTime(0), switchMap$1((v) => {
-            if (((prevScrollStateVersion === EMPTY_SCROLL_STATE_VERSION) || (prevScrollStateVersion !== v)) &&
-                (updateIterations < MIN_PREPARE_ITERATIONS)) {
+        const update = (params, emitable = true) => {
+            const { snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion, } = params;
+            const scroller = this._scrollerComponent();
+            if (scroller) {
+                let actualScrollSize = !this._readyToShow && snapScrollToBottom ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
+                    (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0), totalSize = 0, displayItems;
+                const { width, height, x, y } = bounds, viewportSize = (isVertical ? height : width);
+                let scrollLength = Math.round(this._totalSize()) ?? 0, actualScrollLength = Math.round(scrollLength === 0 ? 0 : scrollLength > viewportSize ? scrollLength - viewportSize : scrollLength), roundedMaxPosition = Math.round(actualScrollLength), scrollPosition = Math.round(actualScrollSize);
+                const opts = {
+                    bounds: { width, height, x, y }, dynamicSize, isVertical, itemSize,
+                    bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
+                };
+                if (snapScrollToBottom && !this._readyToShow) {
+                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize });
+                    displayItems = calculatedDisplayItems;
+                    totalSize = calculatedTotalSize1;
+                    scrollLength = Math.round(totalSize) ?? 0;
+                    actualScrollLength = Math.round(scrollLength === 0 ? 0 : scrollLength > viewportSize ? scrollLength - viewportSize : scrollLength);
+                    roundedMaxPosition = Math.round(actualScrollLength);
+                    scrollPosition = Math.round(actualScrollSize);
+                }
+                else {
+                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize } = this._trackBox.updateCollection(items, itemConfigMap, opts);
+                    displayItems = calculatedDisplayItems;
+                    totalSize = calculatedTotalSize;
+                }
+                scroller.totalSize = totalSize;
+                this._totalSize.set(totalSize);
+                this._service.collection = displayItems;
+                this.resetBoundsSize(isVertical, totalSize);
+                this.createDisplayComponentsIfNeed(displayItems);
+                this.tracking();
+                if (emitable && this._readyToShow && actualScrollLength > 0) {
+                    const isScrollStart = this._isUserScrolling && scrollPosition < MIN_SCROLL_TO_START_PIXELS;
+                    this._isScrollStart.set(isScrollStart);
+                    if (isScrollStart) {
+                        this._isScrollFinished.set(false);
+                    }
+                    else {
+                        this._isScrollFinished.set(scrollPosition >= roundedMaxPosition);
+                    }
+                }
+                actualScrollSize = !this._readyToShow && snapScrollToBottom ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
+                    (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0);
+                const delta = this._trackBox.delta, roundedActualScrollSize = Math.round(actualScrollSize), scrollPositionAfterUpdate = actualScrollSize + delta, roundedScrollPositionAfterUpdate = Math.round(scrollPositionAfterUpdate), roundedMaxPositionAfterUpdate = Math.round(totalSize - viewportSize);
+                if (this._isSnappingMethodAdvanced) {
+                    this.updateRegularRenderer();
+                }
+                scroller.delta = delta;
+                this._trackBox.clearDelta();
+                if ((snapScrollToBottom && this._trackBox.isSnappedToEnd) ||
+                    (snapScrollToBottom && actualScrollSize > 0 &&
+                        ((roundedScrollPositionAfterUpdate >= scrollPosition) &&
+                            (scrollPosition >= roundedMaxPosition) &&
+                            (roundedMaxPositionAfterUpdate >= roundedMaxPosition)))) {
+                    if (!this._trackBox.isSnappedToEnd) {
+                        this._isScrollFinished.set(true);
+                    }
+                    this._trackBox.isScrollEnd = true;
+                    if (emitable && this._readyToShow) {
+                        this.emitScrollEvent(true, false);
+                    }
+                    if (!this._readyToShow || roundedMaxPositionAfterUpdate > 0) {
+                        const params = {
+                            [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
+                            fireUpdate: false, behavior: BEHAVIOR_INSTANT,
+                            blending: false, duration: this.animationParams().scrollToItem,
+                        };
+                        scroller?.scrollTo?.(params);
+                        if (emitable && !this._readyToShow) {
+                            this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
+                        }
+                        return;
+                    }
+                }
+                else if (roundedActualScrollSize !== roundedScrollPositionAfterUpdate && scrollPositionAfterUpdate > 0) {
+                    if (!snapScrollToBottom && scrollPositionAfterUpdate >= roundedMaxPosition) {
+                        if (!this._trackBox.isSnappedToEnd) {
+                            this._isScrollFinished.set(true);
+                        }
+                    }
+                    if (this._scrollSize() !== scrollPositionAfterUpdate) {
+                        const params = {
+                            [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: true,
+                            fireUpdate: false, behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
+                        };
+                        scroller.scrollTo(params);
+                        if (emitable && !this._readyToShow) {
+                            this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
+                        }
+                        return;
+                    }
+                }
+                if (emitable && !this._readyToShow) {
+                    this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
+                }
+            }
+        };
+        const $updateComplete = this.$update.pipe(takeUntilDestroyed(), switchMap$1((v) => {
+            if (((this._prevScrollStateVersion === EMPTY_SCROLL_STATE_VERSION) || (this._prevScrollStateVersion !== v)) &&
+                (this._updateIterations < MIN_PREPARE_ITERATIONS)) {
                 if (v !== EMPTY_SCROLL_STATE_VERSION) {
-                    prevScrollStateVersion = v;
+                    this._prevScrollStateVersion = v;
                 }
                 this._trackBox.isScrollEnd = true;
-                this.updateToEnd();
+                this._$fireUpdateNextFrame.next();
                 return of(false);
             }
-            if (prevScrollStateVersion === v) {
+            if (this._prevScrollStateVersion === v) {
                 this._trackBox.isScrollEnd = true;
-                if (updateIterations < MIN_PREPARE_ITERATIONS) {
-                    updateIterations++;
-                    this.updateToEnd();
+                if (this._updateIterations === RESET_CACHE_FRAME_NUMBER) {
+                    this.refreshActualItemSize(true);
+                }
+                if (this._updateIterations < PREPARATION_REUPDATE_LENGTH) {
+                    this._updateIterations++;
                     this._$fireUpdateNextFrame.next();
                     return of(false);
                 }
             }
-            prevScrollStateVersion = v;
+            this._prevScrollStateVersion = v;
             return of(true);
-        }), debounceTime(0), filter$1(v => !!v), distinctUntilChanged()), $items = toObservable(this.items).pipe(takeUntilDestroyed(), map(i => !i ? [] : i)), $dynamicSize = toObservable(this.dynamicSize);
-        const $snapScrollToBottom = toObservable(this.snapScrollToBottom), $waitForPreparation = toObservable(this.waitForPreparation);
-        combineLatest([$dynamicSize, $snapScrollToBottom, $waitForPreparation]).pipe(takeUntilDestroyed(), switchMap$1(([dynamicSize, snapScrollToBottom, waitForPreparation]) => {
+        }), filter$1(v => !!v), distinctUntilChanged()), $items = toObservable(this.items), $dynamicSize = toObservable(this.dynamicSize);
+        const $viewInit = this.$viewInit, $snapScrollToBottom = toObservable(this.snapScrollToBottom), $waitForPreparation = toObservable(this.waitForPreparation);
+        combineLatest([$dynamicSize, $snapScrollToBottom, $waitForPreparation]).pipe(takeUntilDestroyed(this._destroyRef), distinctUntilChanged(), switchMap$1(([dynamicSize, snapScrollToBottom, waitForPreparation]) => {
             if (!dynamicSize || !snapScrollToBottom || !waitForPreparation) {
-                prepared = readyToStart = true;
+                this._readyToShow = true;
+                this.refreshActualItemSize(true);
                 const scrollerComponent = this._scrollerComponent();
                 if (scrollerComponent) {
                     scrollerComponent.prepared = true;
@@ -4903,60 +4981,76 @@ class NgVirtualListComponent {
                 return of(false);
             }
             if (!!dynamicSize && !!snapScrollToBottom && !!waitForPreparation) {
-                return this.$prepared.pipe(takeUntilDestroyed(this._destroyRef), distinctUntilChanged(), switchMap$1(v => {
+                this._$show.next(false);
+                this.cacheClean();
+                this._readyToShow = this._isUserScrolling = false;
+                const scrollerComponent = this._scrollerComponent();
+                if (scrollerComponent) {
+                    scrollerComponent.prepared = false;
+                    scrollerComponent.stopScrolling();
+                }
+                this.classes.set({ prepared: false, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: false });
+                return $items.pipe(takeUntilDestroyed(this._destroyRef), map(i => (i ?? []).length > 0), distinctUntilChanged(), switchMap$1(v => {
                     if (!v) {
-                        this._$show.next(false);
-                        readyToStart = isUserScrolling = prepared = false;
                         this.cacheClean();
+                        this._readyToShow = this._isUserScrolling = false;
+                        this.refreshActualItemSize(false);
+                        this._trackBox.isScrollEnd = true;
+                        this._updateIterations = 0;
+                        this._prevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION;
                         const scrollerComponent = this._scrollerComponent();
                         if (scrollerComponent) {
                             scrollerComponent.prepared = false;
                             scrollerComponent.stopScrolling();
                         }
-                        this.classes.set({ prepared: v, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: false });
-                        this._service.update(true);
+                        this.classes.set({ prepared: false, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: false });
+                        this._$show.next(false);
                         return of(false);
                     }
-                    return of(true).pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(v => {
+                    return of(true).pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(() => {
                         const waitForPreparation = this.waitForPreparation();
                         if (waitForPreparation) {
-                            prevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION;
-                            updateIterations = 0;
+                            this.refreshActualItemSize(false);
                             return $updateComplete.pipe(takeUntilDestroyed(this._destroyRef), take(1), tap(() => {
-                                prepared = readyToStart = true;
+                                this._readyToShow = true;
                                 const waitForPreparation = this.waitForPreparation(), scrollerComponent = this._scrollerComponent();
                                 if (scrollerComponent) {
                                     scrollerComponent.prepared = true;
                                     scrollerComponent.stopScrolling();
                                 }
                                 this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
-                                this._service.update(true);
                                 this._$show.next(true);
+                            }), tap(() => {
+                                this.refreshActualItemSize(true);
+                                this._scrollerComponent()?.refresh(true, true);
                             }));
                         }
-                        prepared = readyToStart = true;
+                        this._readyToShow = true;
                         const scrollerComponent = this._scrollerComponent();
                         if (scrollerComponent) {
                             scrollerComponent.prepared = true;
                             scrollerComponent.stopScrolling();
                         }
                         this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
-                        this._service.update(true);
                         this._$show.next(true);
                         return of(false);
                     }));
                 }));
             }
-            prepared = readyToStart = true;
-            const scrollerComponent = this._scrollerComponent();
-            if (scrollerComponent) {
-                scrollerComponent.prepared = true;
-                scrollerComponent.stopScrolling();
+            else {
+                this._readyToShow = true;
+                this.refreshActualItemSize(true);
+                const scrollerComponent = this._scrollerComponent();
+                if (scrollerComponent) {
+                    scrollerComponent.prepared = true;
+                    scrollerComponent.stopScrolling();
+                }
+                this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: false });
+                this._service.update(true);
+                this._$show.next(true);
+                this._scrollerComponent()?.refresh(true, true);
+                return of(false);
             }
-            this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: false });
-            this._service.update(true);
-            this._$show.next(true);
-            return of(false);
         })).subscribe();
         this._service.$focusedId.pipe(takeUntilDestroyed(), tap(v => {
             this.focusedElement.set(v ?? undefined);
@@ -4992,7 +5086,7 @@ class NgVirtualListComponent {
             isResetedReachStart = v;
         })).subscribe();
         $isScrollStart.pipe(takeUntilDestroyed(), distinctUntilChanged(), debounceTime(0), tap(v => {
-            if (readyToStart && v && !isResetedReachStart && this._scrollerComponent()?.scrollable) {
+            if (this._readyToShow && v && !isResetedReachStart && this._scrollerComponent()?.scrollable) {
                 this._trackBox.isScrollStart = true;
                 this.onScrollReachStart.emit();
             }
@@ -5000,7 +5094,7 @@ class NgVirtualListComponent {
         })).subscribe();
         $isScrollFinished.pipe(takeUntilDestroyed(), distinctUntilChanged(), debounceTime(0), tap(v => {
             this._trackBox.isScrollEnd = v;
-            if (readyToStart && v && this._scrollerComponent()?.scrollable) {
+            if (this._readyToShow && v && this._scrollerComponent()?.scrollable) {
                 this.onScrollReachEnd.emit();
             }
         })).subscribe();
@@ -5013,17 +5107,31 @@ class NgVirtualListComponent {
         $trackBy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
-        const $bounds = toObservable(this._bounds).pipe(filter$1(b => !!b)), $listBounds = toObservable(this._listBounds).pipe(filter$1(b => !!b)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $itemConfigMap = toObservable(this.itemConfigMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isLazy = toObservable(this.collectionMode).pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = toObservable(this.methodForSelecting), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(map(v => Array.isArray(v) ? v : [])), $actualItems = toObservable(this._actualItems), $screenReaderMessage = toObservable(this.screenReaderMessage), $displayItems = this._service.$displayItems, $cacheVersion = toObservable(this._cacheVersion);
+        const $bounds = toObservable(this._bounds).pipe(filter$1(b => !!b)), $listBounds = toObservable(this._listBounds).pipe(filter$1(b => !!b)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.actualItemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $itemConfigMap = toObservable(this.itemConfigMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isLazy = toObservable(this.collectionMode).pipe(map(v => this.getIsLazy(v || DEFAULT_COLLECTION_MODE))), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = toObservable(this.methodForSelecting), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(map(v => Array.isArray(v) ? v : [])), $actualItems = toObservable(this._actualItems), $screenReaderMessage = toObservable(this.screenReaderMessage), $displayItems = this._service.$displayItems, $cacheVersion = toObservable(this._cacheVersion);
         combineLatest([$displayItems, $screenReaderMessage, $isVertical, $scrollSize, $bounds]).pipe(takeUntilDestroyed(), distinctUntilChanged(), debounceTime(100), takeUntilDestroyed(), tap(([items, screenReaderMessage, isVertical, scrollSize, bounds]) => {
             this.screenReaderFormattedMessage.set(formatScreenReaderMessage(items, screenReaderMessage, scrollSize, isVertical, bounds));
         })).subscribe();
         $isLazy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.isLazy = v;
         })).subscribe();
-        combineLatest([$items, $itemSize]).pipe(takeUntilDestroyed(), map(([items, itemSize]) => ({ items, itemSize })), tap(({ items, itemSize }) => {
-            this._trackBox.resetCollection(items, itemSize);
+        $items.pipe(takeUntilDestroyed(), debounceTime(0), tap(items => {
+            this._trackBox.resetCollection(items, this.actualItemSize());
+            if (!this._readyToShow) {
+                this._readyToShow = this._isUserScrolling = false;
+                this.refreshActualItemSize(false);
+                this._trackBox.isScrollEnd = true;
+                this._updateIterations = 0;
+                this._prevScrollStateVersion = EMPTY_SCROLL_STATE_VERSION;
+                const scrollerComponent = this._scrollerComponent();
+                if (scrollerComponent) {
+                    scrollerComponent.prepared = false;
+                    scrollerComponent.stopScrolling();
+                }
+                this.classes.set({ prepared: false, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: false });
+                this._$show.next(false);
+            }
         })).subscribe();
-        combineLatest([$items, $collapsedItemIds, $itemConfigMap, $trackBy]).pipe(takeUntilDestroyed(), tap(([items, collapsedIds, itemConfigMap, trackBy]) => {
+        combineLatest([$items, $collapsedItemIds, $itemConfigMap, $trackBy]).pipe(takeUntilDestroyed(), debounceTime(0), tap(([items, collapsedIds, itemConfigMap, trackBy]) => {
             const hiddenItems = new CMap();
             let isCollapsed = false;
             for (let i = 0, l = items.length; i < l; i++) {
@@ -5087,131 +5195,47 @@ class NgVirtualListComponent {
         })).subscribe();
         const $snapScrollToEndCanceller = this.$snapScrollToEndCanceller;
         $snapScrollToEndCanceller.pipe(takeUntilDestroyed(), filter$1(v => !!v), tap((v) => {
-            const scroller = this._scrollerComponent();
-            if (scroller) {
-                this._trackBox.cancelScrollSnappingToEnd(true);
+            if (this._readyToShow) {
+                const scroller = this._scrollerComponent();
+                if (scroller) {
+                    this._trackBox.cancelScrollSnappingToEnd(true);
+                }
             }
         }), tap(() => {
-            this._$snapScrollToEndCanceller.next(false);
-        })).subscribe();
-        const update = (params) => {
-            const { snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion, } = params;
-            const scroller = this._scrollerComponent();
-            if (scroller) {
-                let actualScrollSize = !prepared && snapScrollToBottom ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
-                    (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0), totalSize = 0, displayItems;
-                const { width, height, x, y } = bounds, viewportSize = (isVertical ? height : width);
-                let scrollLength = Math.round(this._totalSize()) ?? 0, actualScrollLength = Math.round(scrollLength === 0 ? 0 : scrollLength > viewportSize ? scrollLength - viewportSize : scrollLength), roundedMaxPosition = Math.round(actualScrollLength), scrollPosition = Math.round(actualScrollSize);
-                const opts = {
-                    bounds: { width, height, x, y }, dynamicSize, isVertical, itemSize,
-                    bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
-                };
-                if (snapScrollToBottom && !prepared) {
-                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize });
-                    displayItems = calculatedDisplayItems;
-                    totalSize = calculatedTotalSize1;
-                    scrollLength = Math.round(totalSize) ?? 0;
-                    actualScrollLength = Math.round(scrollLength === 0 ? 0 : scrollLength > viewportSize ? scrollLength - viewportSize : scrollLength);
-                    roundedMaxPosition = Math.round(actualScrollLength);
-                    scrollPosition = Math.round(actualScrollSize);
-                }
-                else {
-                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize } = this._trackBox.updateCollection(items, itemConfigMap, opts);
-                    displayItems = calculatedDisplayItems;
-                    totalSize = calculatedTotalSize;
-                }
-                scroller.totalSize = totalSize;
-                this._totalSize.set(totalSize);
-                this._service.collection = displayItems;
-                this.resetBoundsSize(isVertical, totalSize);
-                this.createDisplayComponentsIfNeed(displayItems);
-                this.tracking();
-                if (prepared && readyToStart && actualScrollLength > 0) {
-                    const isScrollStart = isUserScrolling && scrollPosition < MIN_SCROLL_TO_START_PIXELS;
-                    this._isScrollStart.set(isScrollStart);
-                    if (isScrollStart) {
-                        this._isScrollFinished.set(false);
-                    }
-                    else {
-                        this._isScrollFinished.set(scrollPosition >= roundedMaxPosition);
-                    }
-                }
-                actualScrollSize = !prepared && snapScrollToBottom ? (isVertical ? scroller.scrollHeight ?? 0 : scroller.scrollWidth ?? 0) :
-                    (isVertical ? scroller.scrollTop ?? 0 : scroller.scrollLeft ?? 0);
-                const delta = this._trackBox.delta, roundedActualScrollSize = Math.round(actualScrollSize), scrollPositionAfterUpdate = actualScrollSize + delta, roundedScrollPositionAfterUpdate = Math.round(scrollPositionAfterUpdate), roundedMaxPositionAfterUpdate = Math.round(totalSize - viewportSize);
-                if (this._isSnappingMethodAdvanced) {
-                    this.updateRegularRenderer();
-                }
-                scroller.delta = delta;
-                this._trackBox.clearDelta();
-                if ((snapScrollToBottom && this._trackBox.isSnappedToEnd) ||
-                    (snapScrollToBottom && actualScrollSize > 0 &&
-                        ((roundedScrollPositionAfterUpdate >= scrollPosition) &&
-                            (scrollPosition >= roundedMaxPosition) &&
-                            (roundedMaxPositionAfterUpdate >= roundedMaxPosition)))) {
-                    if (!this._trackBox.isSnappedToEnd) {
-                        this._isScrollFinished.set(true);
-                    }
-                    this._trackBox.isScrollEnd = true;
-                    if (prepared && readyToStart) {
-                        this.emitScrollEvent(true, false);
-                    }
-                    if (roundedMaxPositionAfterUpdate > 0) {
-                        const params = {
-                            [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
-                            fireUpdate: false, behavior: BEHAVIOR_INSTANT,
-                            blending: scroller.isMoving, duration: this.animationParams().scrollToItem,
-                        };
-                        scroller?.scrollTo?.(params);
-                        this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
-                        return;
-                    }
-                }
-                else if (roundedActualScrollSize !== roundedScrollPositionAfterUpdate && scrollPositionAfterUpdate > 0) {
-                    if (!snapScrollToBottom && scrollPositionAfterUpdate >= roundedMaxPosition) {
-                        if (!this._trackBox.isSnappedToEnd) {
-                            this._isScrollFinished.set(true);
-                        }
-                    }
-                    if (this._scrollSize() !== scrollPositionAfterUpdate) {
-                        const params = {
-                            [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: prepared && readyToStart,
-                            fireUpdate: false, behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
-                        };
-                        scroller.scrollTo(params);
-                        this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
-                        return;
-                    }
-                }
-                if (!prepared && !readyToStart) {
-                    this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
-                }
+            if (this._readyToShow) {
+                this._$snapScrollToEndCanceller.next(false);
             }
-        };
-        combineLatest([$snapScrollToBottom, $bounds, $listBounds, $scrollEndOffset, $actualItems, $itemConfigMap, $scrollSize, $itemSize,
-            $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion, this.$fireUpdate,
-        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(([snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
-            update({
-                snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize,
-                bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,
-            });
         })).subscribe();
-        combineLatest([$items, $dynamicSize]).pipe(takeUntilDestroyed(), filter$1(([, dynamic]) => !dynamic), delay(0), takeUntilDestroyed(), tap(() => {
+        $viewInit.pipe(takeUntilDestroyed(), filter$1(v => !!v), switchMap$1(() => {
+            return combineLatest([$snapScrollToBottom, $bounds, $listBounds, $scrollEndOffset, $actualItems, $itemConfigMap, $scrollSize, $itemSize,
+                $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion, this.$fireUpdate,
+            ]).pipe(takeUntilDestroyed(this._destroyRef), distinctUntilChanged(), tap(([snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
+                update({
+                    snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize,
+                    bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,
+                });
+            }));
+        })).subscribe();
+        combineLatest([$items, $dynamicSize]).pipe(takeUntilDestroyed(), debounceTime(0), filter$1(([, dynamic]) => !dynamic), delay(0), takeUntilDestroyed(), tap(() => {
             this._scrollerComponent()?.refresh(true);
         })).subscribe();
         const $scroller = toObservable(this._scroller).pipe(takeUntilDestroyed(), filter$1(v => !!v), map(v => v.nativeElement), take(1)), $scrollerScroll = toObservable(this._scrollerComponent).pipe(takeUntilDestroyed(), filter$1(v => !!v), take(1), switchMap$1(scroller => scroller.$scroll)), $scrollerScrollEnd = toObservable(this._scrollerComponent).pipe(takeUntilDestroyed(), filter$1(v => !!v), take(1), switchMap$1(scroller => scroller.$scrollEnd)), $list = toObservable(this._list).pipe(takeUntilDestroyed(), filter$1(v => !!v), map(v => v.nativeElement), take(1));
         $scroller.pipe(takeUntilDestroyed(), distinctUntilChanged(), switchMap$1(scroller => {
             return fromEvent(scroller, SCROLLER_WHEEL, { passive: true }).pipe(takeUntilDestroyed(this._destroyRef), filter$1(() => {
-                return !!this._trackBox.isSnappedToEnd;
+                return !!this._trackBox.isSnappedToEnd && this._readyToShow;
             }), tap(() => {
-                this._$snapScrollToEndCanceller.next(true);
+                if (this._readyToShow) {
+                    this._$snapScrollToEndCanceller.next(true);
+                }
             }));
         })).subscribe();
         $scroller.pipe(takeUntilDestroyed(), distinctUntilChanged(), switchMap$1(scroller => {
             return fromEvent(scroller, SCROLLER_SCROLLBAR_SCROLL, { passive: true }).pipe(takeUntilDestroyed(this._destroyRef), filter$1(() => {
                 return !!this._trackBox.isSnappedToEnd;
             }), tap(() => {
-                this._$snapScrollToEndCanceller.next(true);
+                if (this._readyToShow) {
+                    this._$snapScrollToEndCanceller.next(true);
+                }
             }));
         })).subscribe();
         const $docPointerUp = fromEvent(document, MOUSE_UP, { passive: true }).pipe(take(1)), $docPointerLeave = fromEvent(document, MOUSE_LEAVE, { passive: true }).pipe(take(1)), $docPointerOut = fromEvent(document, MOUSE_OUT, { passive: true }).pipe(take(1)), $pointerMoveTakeUntil = race([$docPointerUp, $docPointerLeave, $docPointerOut]).pipe(takeUntilDestroyed(), take(1));
@@ -5228,14 +5252,16 @@ class NgVirtualListComponent {
                 }
                 return 0;
             }), tap(() => {
-                this._$snapScrollToEndCanceller.next(true);
+                if (this._readyToShow) {
+                    this._$snapScrollToEndCanceller.next(true);
+                }
             }));
         })).subscribe();
         const $docTouchUp = fromEvent(document, TOUCH_END, { passive: true }).pipe(take(1)), $docTouchLeave = fromEvent(document, TOUCH_LEAVE, { passive: true }).pipe(take(1)), $docTouchOut = fromEvent(document, TOUCH_OUT, { passive: true }).pipe(take(1)), $touchMoveTakeUntil = race([$docTouchUp, $docTouchLeave, $docTouchOut]).pipe(takeUntilDestroyed(), take(1));
         $scroller.pipe(takeUntilDestroyed(), distinctUntilChanged(), switchMap$1(scroller => {
             return fromEvent(scroller, TOUCH_START, { passive: true }).pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(e => {
                 return $scrollerScroll.pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($touchMoveTakeUntil), filter$1(() => {
-                    return !!this._trackBox.isSnappedToEnd;
+                    return !!this._trackBox.isSnappedToEnd && this._readyToShow;
                 }));
             }), map(e => {
                 const scroller = this._scrollerComponent();
@@ -5245,18 +5271,22 @@ class NgVirtualListComponent {
                 }
                 return 0;
             }), tap(() => {
-                this._$snapScrollToEndCanceller.next(true);
+                if (this._readyToShow) {
+                    this._$snapScrollToEndCanceller.next(true);
+                }
             }));
         })).subscribe();
         $scroller.pipe(takeUntilDestroyed(), distinctUntilChanged(), switchMap$1(scroller => {
             return $scrollerScroll.pipe(takeUntilDestroyed(this._destroyRef));
         }), tap(userAction => {
-            isUserScrolling = userAction;
+            this._isUserScrolling = userAction;
             const scrollerEl = this._scroller()?.nativeElement, scrollerComponent = this._scrollerComponent();
             if (scrollerEl && scrollerComponent) {
-                const event = this.emitScrollEvent(false);
+                const event = this.emitScrollEvent(false, this._readyToShow);
                 if (userAction) {
-                    this._$snapScrollToEndCanceller.next(true);
+                    if (this._readyToShow) {
+                        this._$snapScrollToEndCanceller.next(true);
+                    }
                     if (!this.dynamicSize()) {
                         this._$fireUpdate.next(event);
                     }
@@ -5266,12 +5296,14 @@ class NgVirtualListComponent {
         $scroller.pipe(takeUntilDestroyed(), distinctUntilChanged(), switchMap$1(scroller => {
             return $scrollerScrollEnd.pipe(takeUntilDestroyed(this._destroyRef));
         }), tap(userAction => {
-            isUserScrolling = userAction;
+            this._isUserScrolling = userAction;
             const scrollerEl = this._scroller()?.nativeElement, scrollerComponent = this._scrollerComponent();
             if (scrollerEl && scrollerComponent) {
-                const event = this.emitScrollEvent(true);
+                const event = this.emitScrollEvent(true, this._readyToShow);
                 if (userAction) {
-                    this._$snapScrollToEndCanceller.next(true);
+                    if (this._readyToShow) {
+                        this._$snapScrollToEndCanceller.next(true);
+                    }
                     if (!this.dynamicSize()) {
                         this._$fireUpdate.next(event);
                     }
@@ -5284,9 +5316,11 @@ class NgVirtualListComponent {
             const scroller = this._scrollerComponent();
             if (scroller) {
                 const isVertical = this._isVertical, bounds = this._bounds(), listBounds = this._listBounds(), scrollSize = (isVertical ? scroller.scrollTop : scroller.scrollLeft), scrollLength = isVertical ? (listBounds?.height ?? 0) - (bounds?.height ?? 0) : (listBounds?.width ?? 0) - (bounds?.width ?? 0), actualScrollSize = scrollSize;
-                if (this._trackBox.isSnappedToEnd) {
-                    if (scrollSize < scrollLength) {
-                        this._trackBox.cancelScrollSnappingToEnd();
+                if (this._readyToShow) {
+                    if (this._trackBox.isSnappedToEnd) {
+                        if (scrollSize < scrollLength) {
+                            this._trackBox.cancelScrollSnappingToEnd();
+                        }
                     }
                 }
                 this._scrollSize.set(actualScrollSize);
@@ -5310,14 +5344,14 @@ class NgVirtualListComponent {
         })).subscribe();
         const $scrollTo = this.$scrollTo;
         combineLatest([$scroller, $trackBy, $scrollTo]).pipe(takeUntilDestroyed(), filter$1(([scroller]) => scroller !== undefined), map(([scroller, trackBy, event]) => ({ scroller: scroller, trackBy, event })), switchMap$1(({ scroller, trackBy, event }) => {
-            if (!prepared || !readyToStart) {
+            if (!this._readyToShow) {
                 return of([false]);
             }
             const scrollerComponent = this._scrollerComponent(), { id, iteration = 0, blending = false, isLastIteration = false, scrollCalled = false, cb, } = event;
             if (scrollerComponent) {
                 const items = this._actualItems();
                 if (items && items.length) {
-                    const dynamicSize = this.dynamicSize(), itemSize = this.itemSize();
+                    const dynamicSize = this.dynamicSize(), itemSize = this.actualItemSize();
                     if (dynamicSize) {
                         const { width, height, x, y } = this._bounds() || { x: 0, y: 0, width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), isVertical = this._isVertical, currentScrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), delta = this._trackBox.delta, opts = {
                             bounds: { width, height, x, y }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
@@ -5348,8 +5382,9 @@ class NgVirtualListComponent {
                         }
                         this._$snapScrollToEndCanceller.next(true);
                         const notChanged = actualScrollSize === currentScrollSize;
-                        scrollerComponent?.scrollTo?.(params);
-                        if ((!notChanged && iteration < MAX_SCROLL_TO_ITERATIONS) || iteration < MAX_SCROLL_TO_ITERATIONS) {
+                        if ((!notChanged && iteration < MAX_SCROLL_TO_ITERATIONS) ||
+                            (!this.snapScrollToBottom() && iteration < MAX_SCROLL_TO_ITERATIONS)) {
+                            scrollerComponent?.scrollTo?.(params);
                             this._$scrollTo.next(params);
                             return of([false, {
                                     id, scroller: scrollerComponent, iteration: iteration + 1, blending,
@@ -5364,7 +5399,7 @@ class NgVirtualListComponent {
                     else {
                         const index = items.findIndex(item => item[trackBy] === id);
                         if (index > -1) {
-                            const isVertical = this._isVertical, currentScrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), scrollSize = index * this.itemSize();
+                            const isVertical = this._isVertical, currentScrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), scrollSize = index * this.actualItemSize();
                             if (currentScrollSize !== scrollSize) {
                                 this._$snapScrollToEndCanceller.next(true);
                                 const params = {
@@ -5383,10 +5418,12 @@ class NgVirtualListComponent {
             if (!finished) {
                 if (!!params) {
                     this._$scrollTo.next(params);
+                    return;
                 }
-                return;
             }
-            this._trackBox.cancelScrollSnappingToEnd(true);
+            if (this._readyToShow) {
+                this._trackBox.cancelScrollSnappingToEnd(true);
+            }
             const p = params;
             if (p.scrollCalled && p.scroller) {
                 this._scrollerComponent()?.refresh();
@@ -5446,6 +5483,9 @@ class NgVirtualListComponent {
         $collapsedIds.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
             this._service.setCollapsedIds(v);
         })).subscribe();
+    }
+    ngAfterViewInit() {
+        this._$viewInit.next(true);
         this._$fireUpdate.next({
             scrollSize: 0,
             scrollWeight: 0,
@@ -5496,6 +5536,24 @@ class NgVirtualListComponent {
             }
         }
     }
+    refreshActualItemSize(value) {
+        if (!this.waitForPreparation()) {
+            return;
+        }
+        let size;
+        const bounds = this._bounds();
+        if (value === false) {
+            size = (this._isVertical ?
+                bounds?.height || DEFAULT_LIST_SIZE :
+                bounds?.width || DEFAULT_LIST_SIZE);
+            this.actualItemSize.set(size);
+        }
+        else {
+            size = this.itemSize();
+            this.actualItemSize.set(size);
+        }
+        this._trackBox.resetCache(this._actualItems(), this.trackBy(), this._isVertical, size, bounds);
+    }
     getIsSnappingMethodAdvanced(m) {
         const method = m || this.snappingMethod();
         return isSnappingMethodAdvenced(method);
@@ -5578,17 +5636,6 @@ class NgVirtualListComponent {
             l.nativeElement.style[prop] = `${size}${PX$2}`;
         }
     }
-    updateToEnd() {
-        const scroller = this._scrollerComponent();
-        if (!!scroller) {
-            const isVerrtical = this._isVertical, actualScrollSize = isVerrtical ? (scroller?.scrollHeight ?? 0) : (scroller?.scrollWidth ?? 0), params = {
-                [isVerrtical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                blending: false, fireUpdate: true, userAction: false, behavior: BEHAVIOR_INSTANT,
-            };
-            scroller.scrollTo(params);
-            scroller.refresh();
-        }
-    }
     /**
      * Returns the bounds of an element with a given id
      */
@@ -5684,7 +5731,9 @@ class NgVirtualListComponent {
         if (scrollerComponent) {
             scrollerComponent.reset();
         }
-        this._$prepared.next(false);
+        if (this._scrollerComponent()?.scrollable) {
+            this._$isResetedReachStart.next(true);
+        }
     }
     /**
      * Stops the list from snapping to the bottom edge.