@shopify/flash-list 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/recyclerview/layout-managers/LayoutManager.ts

@@ -20,32 +20,43 @@ export abstract class RVLayoutManager {
   protected layouts: RVLayout[];
   /** Dimensions of the visible window/viewport */
   protected windowSize: RVDimension;
-  /** Information about item spans and sizes */
-  protected spanSizeInfo: SpanSizeInfo = {};
   /** Maximum number of columns in the layout */
   protected maxColumns: number;
-  /** Optional callback to override default item layout */
-  protected overrideItemLayout?: (index: number, layout: SpanSizeInfo) => void;
 
   /** Whether to optimize item placement for better space utilization */
   protected optimizeItemArrangement: boolean;
 
   /** Flag indicating if the layout requires repainting */
-  public requiresRepaint: boolean = false;
+  public requiresRepaint = false;
 
+  /** Optional callback to override default item layout */
+  private overrideItemLayout: (index: number, layout: SpanSizeInfo) => void;
   /** Optional function to determine item type */
-  private _getItemType?: (index: number) => string | number;
+  private getItemType: (index: number) => string;
   /** Window for tracking average heights by item type */
   private heightAverageWindow: MultiTypeAverageWindow;
   /** Window for tracking average widths by item type */
   private widthAverageWindow: MultiTypeAverageWindow;
   /** Maximum number of items to process in a single layout pass */
-  private maxItemsToProcess: number = 250; // TODO: make this dynamic
+  private maxItemsToProcess = 250;
+  /** Information about item spans and sizes */
+  private spanSizeInfo: SpanSizeInfo = {};
+  /** Span tracker for each item */
+  private spanTracker: (number | undefined)[] = [];
+
+  /** Current max index with changed layout */
+  private currentMaxIndexWithChangedLayout = -1;
+
+  /**
+   * Last index that was skipped during layout computation.
+   * Used to determine if a layout needs to be recomputed.
+   */
+  private lastSkippedLayoutIndex = Number.MAX_VALUE;
 
   constructor(params: LayoutParams, previousLayoutManager?: RVLayoutManager) {
     this.heightAverageWindow = new MultiTypeAverageWindow(5, 200);
     this.widthAverageWindow = new MultiTypeAverageWindow(5, 200);
-    this._getItemType = params.getItemType;
+    this.getItemType = params.getItemType;
     this.overrideItemLayout = params.overrideItemLayout;
     this.layouts = previousLayoutManager?.layouts ?? [];
     if (previousLayoutManager) {
@@ -57,15 +68,6 @@ export abstract class RVLayoutManager {
     }
   }
 
-  /**
-   * Gets the type of an item at the given index.
-   * @param index Index of the item
-   * @returns Item type or "default" if not specified
-   */
-  private getItemType(index: number): string | number {
-    return this._getItemType?.(index) ?? "default";
-  }
-
   /**
    * Gets the estimated width for an item based on its type.
    * @param index Index of the item
@@ -114,8 +116,8 @@ export abstract class RVLayoutManager {
   /**
    * Gets indices of items currently visible in the viewport.
    * Uses binary search for efficient lookup.
-   * @param unboundDimensionStart Start position of viewport
-   * @param unboundDimensionEnd End position of viewport
+   * @param unboundDimensionStart Start position of viewport (start X or start Y)
+   * @param unboundDimensionEnd End position of viewport (end X or end Y)
    * @returns ConsecutiveNumbers containing visible indices
    */
   getVisibleLayouts(
@@ -157,7 +159,7 @@ export abstract class RVLayoutManager {
     }
     const startIndex = Math.min(...indices);
     // Recompute layouts starting from the smallest index in the original indices array
-    this.recomputeLayouts(
+    this._recomputeLayouts(
       this.getMinRecomputeIndex(startIndex),
       this.getMaxRecomputeIndex(startIndex)
     );
@@ -169,41 +171,49 @@ export abstract class RVLayoutManager {
    * @param totalItemCount Total number of items in the list
    */
   modifyLayout(layoutInfo: RVLayoutInfo[], totalItemCount: number): void {
+    this.maxItemsToProcess = Math.max(
+      this.maxItemsToProcess,
+      layoutInfo.length * 10
+    );
     let minRecomputeIndex = Number.MAX_VALUE;
 
     if (this.layouts.length > totalItemCount) {
       this.layouts.length = totalItemCount;
+      this.spanTracker.length = totalItemCount;
       minRecomputeIndex = totalItemCount - 1; // <0 gets skipped so it's safe to set to totalItemCount - 1
     }
     // update average windows
     minRecomputeIndex = Math.min(
       minRecomputeIndex,
-      this.computeEstimatesAndMinRecomputeIndex(layoutInfo)
+      this.computeEstimatesAndMinMaxChangedLayout(layoutInfo)
     );
 
     if (this.layouts.length < totalItemCount && totalItemCount > 0) {
       const startIndex = this.layouts.length;
       this.layouts.length = totalItemCount;
+      this.spanTracker.length = totalItemCount;
       for (let i = startIndex; i < totalItemCount; i++) {
         this.getLayout(i);
+        this.getSpan(i);
       }
       this.recomputeLayouts(startIndex, totalItemCount - 1);
     }
-    minRecomputeIndex = Math.min(
-      minRecomputeIndex,
-      this.processLayoutInfo(layoutInfo, totalItemCount) ?? minRecomputeIndex
-    );
+
     // compute minRecomputeIndex
+
     minRecomputeIndex = Math.min(
       minRecomputeIndex,
-      this.computeEstimatesAndMinRecomputeIndex(layoutInfo)
+      this.lastSkippedLayoutIndex,
+      this.computeMinIndexWithChangedSpan(layoutInfo),
+      this.processLayoutInfo(layoutInfo, totalItemCount) ?? minRecomputeIndex,
+      this.computeEstimatesAndMinMaxChangedLayout(layoutInfo)
     );
+
     if (minRecomputeIndex >= 0 && minRecomputeIndex < totalItemCount) {
-      this.recomputeLayouts(
-        this.getMinRecomputeIndex(minRecomputeIndex),
-        this.getMaxRecomputeIndex(minRecomputeIndex)
-      );
+      const maxRecomputeIndex = this.getMaxRecomputeIndex(minRecomputeIndex);
+      this._recomputeLayouts(minRecomputeIndex, maxRecomputeIndex);
     }
+    this.currentMaxIndexWithChangedLayout = -1;
   }
 
   /**
@@ -245,6 +255,10 @@ export abstract class RVLayoutManager {
       params.optimizeItemArrangement ?? this.optimizeItemArrangement;
   }
 
+  getLayoutCount(): number {
+    return this.layouts.length;
+  }
+
   /**
    * Abstract method to recompute layouts for items in the given range.
    * @param startIndex Starting index of items to recompute
@@ -265,16 +279,30 @@ export abstract class RVLayoutManager {
   protected abstract estimateLayout(index: number): void;
 
   /**
-   * Gets span size information for an item, applying any overrides.
+   * Gets span for an item, applying any overrides.
+   * This is intended to be called during a relayout call. The value is tracked and used to determine if a span change has occurred.
+   * If skipTracking is true, the operation is not tracked. Can be useful if span is required outside of a relayout call.
+   * The tracker is used to call handleSpanChange if a span change has occurred before relayout call.
+   * // TODO: improve this contract.
    * @param index Index of the item
-   * @returns SpanSizeInfo for the item
+   * @returns Span for the item
    */
-  protected getSpanSizeInfo(index: number): SpanSizeInfo {
+  protected getSpan(index: number, skipTracking = false): number {
     this.spanSizeInfo.span = undefined;
-    this.overrideItemLayout?.(index, this.spanSizeInfo);
-    return this.spanSizeInfo;
+    this.overrideItemLayout(index, this.spanSizeInfo);
+    const span = Math.min(this.spanSizeInfo.span ?? 1, this.maxColumns);
+    if (!skipTracking) {
+      this.spanTracker[index] = span;
+    }
+    return span;
   }
 
+  /**
+   * Method to handle span change for an item. Can be overridden by subclasses.
+   * @param index Index of the item
+   */
+  protected handleSpanChange(index: number) {}
+
   /**
    * Gets the maximum index to process in a single layout pass.
    * @param startIndex Starting index
@@ -282,7 +310,8 @@ export abstract class RVLayoutManager {
    */
   private getMaxRecomputeIndex(startIndex: number): number {
     return Math.min(
-      startIndex + this.maxItemsToProcess,
+      Math.max(startIndex, this.currentMaxIndexWithChangedLayout) +
+        this.maxItemsToProcess,
       this.layouts.length - 1
     );
   }
@@ -296,12 +325,36 @@ export abstract class RVLayoutManager {
     return startIndex;
   }
 
+  private _recomputeLayouts(startIndex: number, endIndex: number): void {
+    this.recomputeLayouts(startIndex, endIndex);
+    if (
+      this.lastSkippedLayoutIndex >= startIndex &&
+      this.lastSkippedLayoutIndex <= endIndex
+    ) {
+      this.lastSkippedLayoutIndex = Number.MAX_VALUE;
+    }
+
+    if (endIndex + 1 < this.layouts.length) {
+      this.lastSkippedLayoutIndex = Math.min(
+        endIndex + 1,
+        this.lastSkippedLayoutIndex
+      );
+      const lastIndex = this.layouts.length - 1;
+      // Since layout managers derive height from last indices we need to make
+      // sure they're not too much out of sync.
+      if (this.layouts[lastIndex].y < this.layouts[endIndex].y) {
+        this.recomputeLayouts(this.lastSkippedLayoutIndex, lastIndex);
+        this.lastSkippedLayoutIndex = Number.MAX_VALUE;
+      }
+    }
+  }
+
   /**
    * Computes size estimates and finds the minimum recompute index.
    * @param layoutInfo Array of layout information for items
    * @returns Minimum index that needs recomputation
    */
-  private computeEstimatesAndMinRecomputeIndex(
+  private computeEstimatesAndMinMaxChangedLayout(
     layoutInfo: RVLayoutInfo[]
   ): number {
     let minRecomputeIndex = Number.MAX_VALUE;
@@ -309,12 +362,18 @@ export abstract class RVLayoutManager {
       const { index, dimensions } = info;
       const storedLayout = this.layouts[index];
       if (
+        index >= this.lastSkippedLayoutIndex ||
+        !storedLayout ||
         !storedLayout.isHeightMeasured ||
         !storedLayout.isWidthMeasured ||
         areDimensionsNotEqual(storedLayout.height, dimensions.height) ||
         areDimensionsNotEqual(storedLayout.width, dimensions.width)
       ) {
         minRecomputeIndex = Math.min(minRecomputeIndex, index);
+        this.currentMaxIndexWithChangedLayout = Math.max(
+          this.currentMaxIndexWithChangedLayout,
+          index
+        );
       }
       this.heightAverageWindow.addValue(
         dimensions.height,
@@ -327,6 +386,21 @@ export abstract class RVLayoutManager {
     }
     return minRecomputeIndex;
   }
+
+  private computeMinIndexWithChangedSpan(layoutInfo: RVLayoutInfo[]): number {
+    let minIndexWithChangedSpan = Number.MAX_VALUE;
+    for (const info of layoutInfo) {
+      const { index } = info;
+      const span = this.getSpan(index, true);
+      const storedSpan = this.spanTracker[index];
+      if (span !== storedSpan) {
+        this.spanTracker[index] = span;
+        this.handleSpanChange(index);
+        minIndexWithChangedSpan = Math.min(minIndexWithChangedSpan, index);
+      }
+    }
+    return minIndexWithChangedSpan;
+  }
 }
 
 /**
@@ -343,31 +417,31 @@ export interface LayoutParams {
    * Determines if the list scrolls horizontally (true) or vertically (false)
    * Affects how items are positioned and which dimension is used for scrolling
    */
-  horizontal?: boolean;
+  horizontal: boolean;
 
   /**
    * Maximum number of columns in a grid layout
    * Controls how many items can be placed side by side
    */
-  maxColumns?: number;
+  maxColumns: number;
 
   /**
    * When true, attempts to optimize item placement for better space utilization
    * May affect the ordering of items to minimize empty space
    */
-  optimizeItemArrangement?: boolean;
+  optimizeItemArrangement: boolean;
 
   /**
    * Callback to manually override layout properties for specific items
    * Allows custom control over span and size for individual items
    */
-  overrideItemLayout?: (index: number, layout: SpanSizeInfo) => void;
+  overrideItemLayout: (index: number, layout: SpanSizeInfo) => void;
 
   /**
    * Function to determine the type of an item at a specific index
    * Used for size estimation and optimization based on item types
    */
-  getItemType?: (index: number) => string | number;
+  getItemType: (index: number) => string;
 }
 
 /**

package/src/recyclerview/layout-managers/LinearLayoutManager.ts

@@ -1,6 +1,10 @@
-import { LayoutParams, RVDimension, RVLayoutInfo } from "./LayoutManager";
-import { RVLayout } from "./LayoutManager";
-import { RVLayoutManager } from "./LayoutManager";
+import {
+  LayoutParams,
+  RVDimension,
+  RVLayoutInfo,
+  RVLayout,
+  RVLayoutManager,
+} from "./LayoutManager";
 
 /**
  * LinearLayoutManager implementation that arranges items in a single row or column.
@@ -10,12 +14,12 @@ export class RVLinearLayoutManagerImpl extends RVLayoutManager {
   /** The bounded size (width for vertical, height for horizontal) */
   private boundedSize: number;
   /** Whether the bounded size has been set */
-  private hasSize: boolean = false;
+  private hasSize = false;
 
   /** Reference to the tallest item in the layout */
   private tallestItem?: RVLayout;
   /** Height of the tallest item */
-  private tallestItemHeight: number = 0;
+  private tallestItemHeight = 0;
 
   constructor(params: LayoutParams, previousLayoutManager?: RVLayoutManager) {
     super(params, previousLayoutManager);
@@ -41,7 +45,7 @@ export class RVLinearLayoutManagerImpl extends RVLayoutManager {
       prevHorizontal !== this.horizontal
     ) {
       if (this.layouts.length > 0) {
-        //console.log("-----> recomputeLayouts", this.horizontal);
+        // console.log("-----> recomputeLayouts", this.horizontal);
         this.recomputeLayouts(0, this.layouts.length - 1);
         this.requiresRepaint = true;
       }
@@ -96,7 +100,7 @@ export class RVLinearLayoutManagerImpl extends RVLayoutManager {
         ? lastLayout.x + lastLayout.width
         : this.boundedSize,
       height: this.horizontal
-        ? this.tallestItem?.height ?? 0
+        ? this.tallestItem?.height ?? this.boundedSize
         : lastLayout.y + lastLayout.height,
     };
   }
@@ -123,7 +127,7 @@ export class RVLinearLayoutManagerImpl extends RVLayoutManager {
         this.requiresRepaint = true;
         targetMinHeight = 0;
       }
-      //set minHeight for all layouts
+      // set minHeight for all layouts
       for (const layout of this.layouts) {
         if (targetMinHeight > 0) {
           layout.height = newTallestItem.height;

package/src/recyclerview/layout-managers/MasonryLayoutManager.ts

@@ -17,13 +17,16 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
   /** Array tracking the current height of each column */
   private columnHeights: number[];
   /** Current column index for sequential placement */
-  private currentColumn: number = 0;
+  private currentColumn = 0;
+
+  /** If there's a span change for masonry layout, we need to recompute all the widths */
+  private fullRelayoutRequired = false;
 
   constructor(params: LayoutParams, previousLayoutManager?: RVLayoutManager) {
     super(params, previousLayoutManager);
     this.boundedSize = params.windowSize.width;
-    this.optimizeItemArrangement = params.optimizeItemArrangement ?? false;
-    this.columnHeights = Array(this.maxColumns).fill(0);
+    this.optimizeItemArrangement = params.optimizeItemArrangement;
+    this.columnHeights = this.columnHeights ?? Array(this.maxColumns).fill(0);
   }
 
   /**
@@ -41,14 +44,10 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
     ) {
       this.boundedSize = params.windowSize.width;
       if (this.layouts.length > 0) {
-        //console.log("-----> recomputeLayouts");
+        // console.log("-----> recomputeLayouts");
 
-        //update all widths
-        for (let i = 0; i < this.layouts.length; i++) {
-          this.layouts[i].width = this.getWidth(i);
-          this.layouts[i].minHeight = undefined;
-        }
-        //TODO: Optimize masonry in general
+        // update all widths
+        this.updateAllWidths();
         this.recomputeLayouts(0, this.layouts.length - 1);
         this.requiresRepaint = true;
       }
@@ -70,6 +69,13 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
       layout.isWidthMeasured = true;
       this.layouts[index] = layout;
     }
+
+    // TODO: Can be optimized
+    if (this.fullRelayoutRequired) {
+      this.updateAllWidths();
+      this.fullRelayoutRequired = false;
+      return 0;
+    }
   }
 
   /**
@@ -88,6 +94,14 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
     layout.enforcedWidth = true;
   }
 
+  /**
+   * Handles span change for an item.
+   * @param index Index of the item
+   */
+  handleSpanChange(index: number) {
+    this.fullRelayoutRequired = true;
+  }
+
   /**
    * Returns the total size of the layout area.
    * @returns RVDimension containing width and height of the layout
@@ -125,7 +139,8 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
 
     for (let i = startIndex; i < itemCount; i++) {
       const layout = this.getLayout(i);
-      const span = this.getSpanSizeInfo(i).span ?? 1;
+      // Skip tracking span because we're not changing widths
+      const span = this.getSpan(i, true);
 
       if (this.optimizeItemArrangement) {
         if (span === 1) {
@@ -148,8 +163,14 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
    * @returns Width of the item
    */
   private getWidth(index: number): number {
-    const span = this.getSpanSizeInfo(index).span ?? 1;
-    return (this.boundedSize / this.maxColumns) * span;
+    return (this.boundedSize / this.maxColumns) * this.getSpan(index);
+  }
+
+  private updateAllWidths() {
+    for (let i = 0; i < this.layouts.length; i++) {
+      this.layouts[i].width = this.getWidth(i);
+      this.layouts[i].minHeight = undefined;
+    }
   }
 
   /**

package/src/recyclerview/utils/componentUtils.ts

@@ -17,7 +17,7 @@ import React from "react";
  * getValidComponent(<MyComponent />)
  */
 export const getValidComponent = (
-  component: React.ComponentType<any> | React.ReactElement | null | undefined
+  component: React.ComponentType | React.ReactElement | null | undefined
 ): React.ReactElement | null => {
   if (React.isValidElement(component)) {
     return component;

package/src/recyclerview/utils/findVisibleIndex.ts

@@ -33,10 +33,9 @@ function binarySearchVisibleIndex(
     const position = isSortedByX ? layout.x : layout.y;
     const size = isSortedByX ? layout.width : layout.height;
 
-    //TODO: Will this find item bigger than viewport
     if (findFirst) {
       // Logic for finding the first visible index
-      if (position >= threshold || position + size >= threshold) {
+      if (position >= threshold || position + size > threshold) {
         // Potential visible index found, continue searching left for earlier visible items
         visibleIndex = mid;
         right = mid - 1;

package/src/recyclerview/utils/measureLayout.ts

@@ -15,7 +15,7 @@ interface Layout {
  * @param view - The React Native View component to measure
  * @returns An object containing x, y, width, and height measurements
  */
-export function measureLayout(view: View, oldLayout: Layout | undefined) {
+function measureLayout(view: View, oldLayout: Layout | undefined) {
   // const layout = view.unstable_getBoundingClientRect();
   // layout.width = roundOffPixel(layout.width);
   // layout.height = roundOffPixel(layout.height);
@@ -31,7 +31,7 @@ export function measureLayout(view: View, oldLayout: Layout | undefined) {
  * @param relativeTo - The reference view to measure against
  * @returns An object containing x, y, width, and height measurements
  */
-export function measureLayoutRelative(
+function measureLayoutRelative(
   view: View,
   relativeTo: View,
   oldLayout: Layout | undefined
@@ -87,3 +87,42 @@ export function areDimensionsEqual(value1: number, value2: number): boolean {
 export function roundOffPixel(value: number): number {
   return PixelRatio.roundToNearestPixel(value);
 }
+
+/**
+ * Specific method for easier mocking
+ * Measures the layout of parent of RecyclerView
+ * Returns the x, y coordinates and dimensions of the view.
+ * @param view - The React Native View component to measure
+ * @returns An object containing x, y, width, and height measurements
+ */
+export function measureParentSize(view: View): Layout {
+  return measureLayout(view, undefined);
+}
+
+/**
+ * Specific method for easier mocking
+ * Measures the layout of child container of RecyclerView
+ * @param childContainerView
+ * @param parentView
+ * @returns
+ */
+export function measureFirstChildLayout(
+  childContainerView: View,
+  parentView: View
+): Layout {
+  return measureLayoutRelative(childContainerView, parentView, undefined);
+}
+
+/**
+ * Specific method for easier mocking
+ * Measures the layout of items of RecyclerView
+ * @param item
+ * @param oldLayout
+ * @returns
+ */
+export function measureItemLayout(
+  item: View,
+  oldLayout: Layout | undefined
+): Layout {
+  return measureLayout(item, oldLayout);
+}

package/src/recyclerview/utils/measureLayout.web.ts

@@ -0,0 +1,102 @@
+interface Layout {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Gets scroll offsets from up to 3 parent elements
+ */
+function getScrollOffsets(element: Element, stopAt: Element) {
+  let scrollX = 0;
+  let scrollY = 0;
+  let currentElement: Element | null = element;
+
+  // Only check up to 3 parent elements
+  while (currentElement && currentElement !== stopAt) {
+    const htmlElement = currentElement as HTMLElement;
+    scrollX += htmlElement.scrollLeft ?? 0;
+    scrollY += htmlElement.scrollTop ?? 0;
+    currentElement = currentElement.parentElement;
+  }
+
+  return { scrollX, scrollY };
+}
+
+/**
+ * Checks if two dimension values are not equal, with a small tolerance.
+ */
+export function areDimensionsNotEqual(value1: number, value2: number): boolean {
+  return !areDimensionsEqual(value1, value2);
+}
+
+/**
+ * Checks if two dimension values are equal, with a small tolerance.
+ */
+export function areDimensionsEqual(value1: number, value2: number): boolean {
+  return Math.abs(value1 - value2) <= 1;
+}
+
+export function roundOffPixel(value: number): number {
+  return value;
+}
+
+/**
+ * Measures the layout of parent of RecyclerView
+ */
+export function measureParentSize(view: Element): Layout {
+  return {
+    x: 0,
+    y: 0,
+    width: view.clientWidth,
+    height: view.clientHeight,
+  };
+}
+
+/**
+ * Measures the layout of child container of RecyclerView
+ */
+export function measureFirstChildLayout(
+  childContainerView: Element,
+  parentView: Element
+): Layout {
+  const childRect = childContainerView.getBoundingClientRect();
+  const parentRect = parentView.getBoundingClientRect();
+
+  // Get scroll offsets for child container (max 3 parents)
+  const scrollOffsets = getScrollOffsets(childContainerView, parentView);
+
+  return {
+    x: childRect.left - parentRect.left + scrollOffsets.scrollX,
+    y: childRect.top - parentRect.top + scrollOffsets.scrollY,
+    width: roundOffPixel(childRect.width),
+    height: roundOffPixel(childRect.height),
+  };
+}
+
+/**
+ * Measures the layout of items of RecyclerView
+ */
+export function measureItemLayout(
+  item: Element,
+  oldLayout: Layout | undefined
+): Layout {
+  const layout = {
+    x: 0,
+    y: 0,
+    width: item.clientWidth,
+    height: item.clientHeight,
+  };
+
+  if (oldLayout) {
+    if (areDimensionsEqual(layout.width, oldLayout.width)) {
+      layout.width = oldLayout.width;
+    }
+    if (areDimensionsEqual(layout.height, oldLayout.height)) {
+      layout.height = oldLayout.height;
+    }
+  }
+
+  return layout;
+}

package/src/viewability/ViewToken.ts

@@ -1,5 +1,5 @@
-export default interface ViewToken {
-  item: any; //TODO: fix this type
+export default interface ViewToken<T> {
+  item: T;
   key: string;
   index: number | null;
   isViewable: boolean;

package/src/viewability/ViewabilityHelper.ts

@@ -89,8 +89,8 @@ class ViewabilityHelper {
       const timeoutId = setTimeout(() => {
         this.timers.delete(timeoutId);
         this.checkViewableIndicesChanges(newViewableIndices);
-        this.timers.add(timeoutId);
       }, minimumViewTime);
+      this.timers.add(timeoutId);
     } else {
       this.checkViewableIndicesChanges(newViewableIndices);
     }