@legendapp/list 2.1.0-beta.5 → 2.1.0-beta.6

package/index.d.mts

@@ -379,6 +379,7 @@ interface InternalState {
     stickyContainers: Map<number, number>;
     stickyContainerPool: Set<number>;
     scrollProcessingEnabled: boolean;
+    isOptimizingItemPositions: boolean;
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];

package/index.d.ts

@@ -379,6 +379,7 @@ interface InternalState {
     stickyContainers: Map<number, number>;
     stickyContainerPool: Set<number>;
     scrollProcessingEnabled: boolean;
+    isOptimizingItemPositions: boolean;
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];

package/index.js

@@ -442,6 +442,10 @@ function getGlobalResizeObserver() {
 }
 var callbackMap = /* @__PURE__ */ new WeakMap();
 function createResizeObserver(element, callback) {
+  if (typeof ResizeObserver === "undefined") {
+    return () => {
+    };
+  }
   if (!element) {
     return () => {
     };
@@ -477,7 +481,7 @@ function useOnLayoutSync({
     const current = ref.current;
     const scrollableNode = (_b = (_a3 = current == null ? void 0 : current.getScrollableNode) == null ? void 0 : _a3.call(current)) != null ? _b : null;
     const element = scrollableNode || current;
-    if (!element || !(element instanceof HTMLElement)) {
+    if (!element) {
       return;
     }
     const emit = (layout, fromLayoutEffect) => {
@@ -499,6 +503,9 @@ function useOnLayoutSync({
   return {};
 }
 function toLayout(rect) {
+  if (!rect) {
+    return { height: 0, width: 0, x: 0, y: 0 };
+  }
   return {
     height: rect.height,
     width: rect.width,
@@ -1189,6 +1196,94 @@ function calculateOffsetForIndex(ctx, state, index) {
   return position;
 }
 
+// src/utils/setPaddingTop.ts
+function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
+  if (stylePaddingTop !== void 0) {
+    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
+    if (stylePaddingTop < prevStylePaddingTop) {
+      let prevTotalSize = peek$(ctx, "totalSize") || 0;
+      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
+      state.timeoutSetPaddingTop = setTimeout(() => {
+        prevTotalSize = peek$(ctx, "totalSize") || 0;
+        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
+      }, 16);
+    }
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  }
+  if (alignItemsPaddingTop !== void 0) {
+    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+  }
+}
+
+// src/utils/updateAlignItemsPaddingTop.ts
+function updateAlignItemsPaddingTop(ctx, state) {
+  const {
+    scrollLength,
+    props: { alignItemsAtEnd, data }
+  } = state;
+  if (alignItemsAtEnd) {
+    let alignItemsPaddingTop = 0;
+    if ((data == null ? void 0 : data.length) > 0) {
+      const contentSize = getContentSize(ctx);
+      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+    }
+    setPaddingTop(ctx, state, { alignItemsPaddingTop });
+  }
+}
+
+// src/core/updateTotalSize.ts
+function updateTotalSize(ctx, state) {
+  const {
+    positions,
+    props: { data }
+  } = state;
+  if (data.length === 0) {
+    addTotalSize(ctx, state, null, 0);
+  } else {
+    const lastId = getId(state, data.length - 1);
+    if (lastId !== void 0) {
+      const lastPosition = positions.get(lastId);
+      if (lastPosition !== void 0) {
+        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
+        if (lastSize !== void 0) {
+          const totalSize = lastPosition + lastSize;
+          addTotalSize(ctx, state, null, totalSize);
+        }
+      }
+    }
+  }
+}
+function addTotalSize(ctx, state, key, add) {
+  const { alignItemsAtEnd } = state.props;
+  const prevTotalSize = state.totalSize;
+  if (key === null) {
+    state.totalSize = add;
+    if (state.timeoutSetPaddingTop) {
+      clearTimeout(state.timeoutSetPaddingTop);
+      state.timeoutSetPaddingTop = void 0;
+    }
+  } else {
+    state.totalSize += add;
+  }
+  if (prevTotalSize !== state.totalSize) {
+    set$(ctx, "totalSize", state.totalSize);
+    if (alignItemsAtEnd) {
+      updateAlignItemsPaddingTop(ctx, state);
+    }
+  }
+}
+
+// src/core/setSize.ts
+function setSize(ctx, state, itemKey, size) {
+  const { sizes } = state;
+  const previousSize = sizes.get(itemKey);
+  const diff = previousSize !== void 0 ? size - previousSize : size;
+  if (diff !== 0) {
+    addTotalSize(ctx, state, itemKey, diff);
+  }
+  sizes.set(itemKey, size);
+}
+
 // src/utils/getItemSize.ts
 function getItemSize(ctx, state, key, index, data, useAverageSize) {
   var _a3, _b;
@@ -1226,7 +1321,7 @@ function getItemSize(ctx, state, key, index, data, useAverageSize) {
   if (size === void 0) {
     size = getEstimatedItemSize ? getEstimatedItemSize(index, data, itemType) : estimatedItemSize;
   }
-  sizes.set(key, size);
+  setSize(ctx, state, key, size);
   return size;
 }
 
@@ -1414,10 +1509,15 @@ function updateScroll(ctx, state, newScroll, forceUpdate) {
 
 // src/core/finishScrollTo.ts
 function finishScrollTo(ctx, state) {
+  var _a3;
   if (state) {
     state.scrollHistory.length = 0;
     state.initialScroll = void 0;
+    state.isOptimizingItemPositions = false;
     set$(ctx, "scrollingTo", void 0);
+    if ((_a3 = state.props) == null ? void 0 : _a3.data) {
+      calculateItemsInView(ctx, state, { forceFullItemPositions: true });
+    }
   }
 }
 
@@ -1601,82 +1701,43 @@ function calculateRowMaxSize(ctx, state, startIndex, endIndex, useAverageSize) {
   return maxSize;
 }
 
-// src/utils/setPaddingTop.ts
-function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
-  if (stylePaddingTop !== void 0) {
-    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-    if (stylePaddingTop < prevStylePaddingTop) {
-      let prevTotalSize = peek$(ctx, "totalSize") || 0;
-      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
-      state.timeoutSetPaddingTop = setTimeout(() => {
-        prevTotalSize = peek$(ctx, "totalSize") || 0;
-        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
-      }, 16);
-    }
-    set$(ctx, "stylePaddingTop", stylePaddingTop);
-  }
-  if (alignItemsPaddingTop !== void 0) {
-    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
-  }
-}
-
-// src/utils/updateAlignItemsPaddingTop.ts
-function updateAlignItemsPaddingTop(ctx, state) {
-  const {
-    scrollLength,
-    props: { alignItemsAtEnd, data }
-  } = state;
-  if (alignItemsAtEnd) {
-    let alignItemsPaddingTop = 0;
-    if ((data == null ? void 0 : data.length) > 0) {
-      const contentSize = getContentSize(ctx);
-      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
-    }
-    setPaddingTop(ctx, state, { alignItemsPaddingTop });
-  }
-}
-
-// src/core/updateTotalSize.ts
-function updateTotalSize(ctx, state) {
-  const {
-    positions,
-    props: { data }
-  } = state;
-  if (data.length === 0) {
-    addTotalSize(ctx, state, null, 0);
-  } else {
-    const lastId = getId(state, data.length - 1);
-    if (lastId !== void 0) {
-      const lastPosition = positions.get(lastId);
-      if (lastPosition !== void 0) {
-        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
-        if (lastSize !== void 0) {
-          const totalSize = lastPosition + lastSize;
-          addTotalSize(ctx, state, null, totalSize);
+// src/utils/getScrollVelocity.ts
+var getScrollVelocity = (state) => {
+  const { scrollHistory } = state;
+  let velocity = 0;
+  if (scrollHistory.length >= 1) {
+    const newest = scrollHistory[scrollHistory.length - 1];
+    let oldest;
+    let start = 0;
+    const now = Date.now();
+    for (let i = 0; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      const nextEntry = scrollHistory[i + 1];
+      if (i > 0) {
+        const prevEntry = scrollHistory[i - 1];
+        const prevDirection = entry.scroll - prevEntry.scroll;
+        const currentDirection = nextEntry.scroll - entry.scroll;
+        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
+          start = i;
+          break;
         }
       }
     }
-  }
-}
-function addTotalSize(ctx, state, key, add) {
-  const { alignItemsAtEnd } = state.props;
-  const prevTotalSize = state.totalSize;
-  if (key === null) {
-    state.totalSize = add;
-    if (state.timeoutSetPaddingTop) {
-      clearTimeout(state.timeoutSetPaddingTop);
-      state.timeoutSetPaddingTop = void 0;
+    for (let i = start; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      if (now - entry.time <= 1e3) {
+        oldest = entry;
+        break;
+      }
     }
-  } else {
-    state.totalSize += add;
-  }
-  if (prevTotalSize !== state.totalSize) {
-    set$(ctx, "totalSize", state.totalSize);
-    if (alignItemsAtEnd) {
-      updateAlignItemsPaddingTop(ctx, state);
+    if (oldest && oldest !== newest) {
+      const scrollDiff = newest.scroll - oldest.scroll;
+      const timeDiff = newest.time - oldest.time;
+      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
     }
   }
-}
+  return velocity;
+};
 
 // src/utils/updateSnapToOffsets.ts
 function updateSnapToOffsets(ctx, state) {
@@ -1694,7 +1755,11 @@ function updateSnapToOffsets(ctx, state) {
 }
 
 // src/core/updateItemPositions.ts
-function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered } = { scrollBottomBuffered: -1, startIndex: 0 }) {
+function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered, forceFullUpdate = false } = {
+  forceFullUpdate: false,
+  scrollBottomBuffered: -1,
+  startIndex: 0
+}) {
   var _a3, _b, _c, _d;
   const {
     columns,
@@ -1710,6 +1775,8 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   const scrollingTo = peek$(ctx, "scrollingTo");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
+  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  state.isOptimizingItemPositions = shouldOptimize;
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
   let currentRowTop = 0;
@@ -1737,11 +1804,11 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   let didBreakEarly = false;
   let breakAt;
   for (let i = startIndex; i < dataLength; i++) {
-    if (breakAt && i > breakAt) {
+    if (shouldOptimize && breakAt !== void 0 && i > breakAt) {
       didBreakEarly = true;
       break;
     }
-    if (breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
+    if (shouldOptimize && breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
       const itemsPerRow = hasColumns ? numColumns : 1;
       breakAt = i + itemsPerRow + 10;
     }
@@ -2119,44 +2186,6 @@ function comparatorByDistance(a, b) {
   return b.distance - a.distance;
 }
 
-// src/utils/getScrollVelocity.ts
-var getScrollVelocity = (state) => {
-  const { scrollHistory } = state;
-  let velocity = 0;
-  if (scrollHistory.length >= 1) {
-    const newest = scrollHistory[scrollHistory.length - 1];
-    let oldest;
-    let start = 0;
-    const now = Date.now();
-    for (let i = 0; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      const nextEntry = scrollHistory[i + 1];
-      if (i > 0) {
-        const prevEntry = scrollHistory[i - 1];
-        const prevDirection = entry.scroll - prevEntry.scroll;
-        const currentDirection = nextEntry.scroll - entry.scroll;
-        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
-          start = i;
-          break;
-        }
-      }
-    }
-    for (let i = start; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      if (now - entry.time <= 1e3) {
-        oldest = entry;
-        break;
-      }
-    }
-    if (oldest && oldest !== newest) {
-      const scrollDiff = newest.scroll - oldest.scroll;
-      const timeDiff = newest.time - oldest.time;
-      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
-    }
-  }
-  return velocity;
-};
-
 // src/core/scrollToIndex.ts
 function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
   if (index >= state.props.data.length) {
@@ -2276,14 +2305,15 @@ function calculateItemsInView(ctx, state, params = {}) {
       enableScrollForNextCalculateItemsInView,
       idCache,
       indexByKey,
+      initialScroll,
       minIndexSizeChanged,
       positions,
+      props: { getItemType, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer },
       scrollForNextCalculateItemsInView,
       scrollLength,
       sizes,
       startBufferedId: startBufferedIdOrig,
-      viewabilityConfigCallbackPairs,
-      props: { getItemType, initialScroll, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer }
+      viewabilityConfigCallbackPairs
     } = state;
     const { data } = state.props;
     const stickyIndicesArr = state.props.stickyIndicesArr || [];
@@ -2295,7 +2325,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const totalSize = peek$(ctx, "totalSize");
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
-    const { dataChanged, doMVCP } = params;
+    const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const speed = getScrollVelocity(state);
     const scrollExtra = 0;
     const { queuedInitialLayout } = state;
@@ -2349,7 +2379,11 @@ function calculateItemsInView(ctx, state, params = {}) {
       positions.clear();
     }
     const startIndex = dataChanged ? 0 : (_b = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _b : 0;
-    updateItemPositions(ctx, state, dataChanged, { scrollBottomBuffered, startIndex });
+    updateItemPositions(ctx, state, dataChanged, {
+      forceFullUpdate: !!forceFullItemPositions,
+      scrollBottomBuffered,
+      startIndex
+    });
     if (minIndexSizeChanged !== void 0) {
       state.minIndexSizeChanged = void 0;
     }
@@ -2731,7 +2765,7 @@ function doInitialAllocateContainers(ctx, state) {
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
     if (state.lastLayout) {
-      if (state.props.initialScroll) {
+      if (state.initialScroll) {
         requestAnimationFrame(() => {
           calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
         });
@@ -2897,7 +2931,6 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
     if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
       shouldMaintainScrollAtEnd = true;
     }
-    addTotalSize(ctx, state, itemKey, diff);
     onItemSizeChanged == null ? void 0 : onItemSizeChanged({
       index,
       itemData: state.props.data[index],
@@ -2962,7 +2995,7 @@ function updateOneItemSize(ctx, state, itemKey, sizeObj) {
     averages.num++;
   }
   if (!prevSize || Math.abs(prevSize - size) > 0.1) {
-    sizes.set(itemKey, size);
+    setSize(ctx, state, itemKey, size);
     return size - prevSize;
   }
   return 0;
@@ -3189,6 +3222,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         idsInView: [],
         indexByKey: /* @__PURE__ */ new Map(),
         initialScroll: initialScrollProp,
+        isOptimizingItemPositions: false,
         isAtEnd: false,
         isAtStart: false,
         isEndReached: false,
@@ -3332,6 +3366,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       );
       refState.current.sizes.clear();
       refState.current.positions.clear();
+      refState.current.totalSize = 0;
+      set$(ctx, "totalSize", 0);
     }
   }
   const onLayoutHeader = React3.useCallback((rect, fromLayoutEffect) => {

package/index.mjs

@@ -421,6 +421,10 @@ function getGlobalResizeObserver() {
 }
 var callbackMap = /* @__PURE__ */ new WeakMap();
 function createResizeObserver(element, callback) {
+  if (typeof ResizeObserver === "undefined") {
+    return () => {
+    };
+  }
   if (!element) {
     return () => {
     };
@@ -456,7 +460,7 @@ function useOnLayoutSync({
     const current = ref.current;
     const scrollableNode = (_b = (_a3 = current == null ? void 0 : current.getScrollableNode) == null ? void 0 : _a3.call(current)) != null ? _b : null;
     const element = scrollableNode || current;
-    if (!element || !(element instanceof HTMLElement)) {
+    if (!element) {
       return;
     }
     const emit = (layout, fromLayoutEffect) => {
@@ -478,6 +482,9 @@ function useOnLayoutSync({
   return {};
 }
 function toLayout(rect) {
+  if (!rect) {
+    return { height: 0, width: 0, x: 0, y: 0 };
+  }
   return {
     height: rect.height,
     width: rect.width,
@@ -1168,6 +1175,94 @@ function calculateOffsetForIndex(ctx, state, index) {
   return position;
 }
 
+// src/utils/setPaddingTop.ts
+function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
+  if (stylePaddingTop !== void 0) {
+    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
+    if (stylePaddingTop < prevStylePaddingTop) {
+      let prevTotalSize = peek$(ctx, "totalSize") || 0;
+      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
+      state.timeoutSetPaddingTop = setTimeout(() => {
+        prevTotalSize = peek$(ctx, "totalSize") || 0;
+        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
+      }, 16);
+    }
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  }
+  if (alignItemsPaddingTop !== void 0) {
+    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+  }
+}
+
+// src/utils/updateAlignItemsPaddingTop.ts
+function updateAlignItemsPaddingTop(ctx, state) {
+  const {
+    scrollLength,
+    props: { alignItemsAtEnd, data }
+  } = state;
+  if (alignItemsAtEnd) {
+    let alignItemsPaddingTop = 0;
+    if ((data == null ? void 0 : data.length) > 0) {
+      const contentSize = getContentSize(ctx);
+      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+    }
+    setPaddingTop(ctx, state, { alignItemsPaddingTop });
+  }
+}
+
+// src/core/updateTotalSize.ts
+function updateTotalSize(ctx, state) {
+  const {
+    positions,
+    props: { data }
+  } = state;
+  if (data.length === 0) {
+    addTotalSize(ctx, state, null, 0);
+  } else {
+    const lastId = getId(state, data.length - 1);
+    if (lastId !== void 0) {
+      const lastPosition = positions.get(lastId);
+      if (lastPosition !== void 0) {
+        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
+        if (lastSize !== void 0) {
+          const totalSize = lastPosition + lastSize;
+          addTotalSize(ctx, state, null, totalSize);
+        }
+      }
+    }
+  }
+}
+function addTotalSize(ctx, state, key, add) {
+  const { alignItemsAtEnd } = state.props;
+  const prevTotalSize = state.totalSize;
+  if (key === null) {
+    state.totalSize = add;
+    if (state.timeoutSetPaddingTop) {
+      clearTimeout(state.timeoutSetPaddingTop);
+      state.timeoutSetPaddingTop = void 0;
+    }
+  } else {
+    state.totalSize += add;
+  }
+  if (prevTotalSize !== state.totalSize) {
+    set$(ctx, "totalSize", state.totalSize);
+    if (alignItemsAtEnd) {
+      updateAlignItemsPaddingTop(ctx, state);
+    }
+  }
+}
+
+// src/core/setSize.ts
+function setSize(ctx, state, itemKey, size) {
+  const { sizes } = state;
+  const previousSize = sizes.get(itemKey);
+  const diff = previousSize !== void 0 ? size - previousSize : size;
+  if (diff !== 0) {
+    addTotalSize(ctx, state, itemKey, diff);
+  }
+  sizes.set(itemKey, size);
+}
+
 // src/utils/getItemSize.ts
 function getItemSize(ctx, state, key, index, data, useAverageSize) {
   var _a3, _b;
@@ -1205,7 +1300,7 @@ function getItemSize(ctx, state, key, index, data, useAverageSize) {
   if (size === void 0) {
     size = getEstimatedItemSize ? getEstimatedItemSize(index, data, itemType) : estimatedItemSize;
   }
-  sizes.set(key, size);
+  setSize(ctx, state, key, size);
   return size;
 }
 
@@ -1393,10 +1488,15 @@ function updateScroll(ctx, state, newScroll, forceUpdate) {
 
 // src/core/finishScrollTo.ts
 function finishScrollTo(ctx, state) {
+  var _a3;
   if (state) {
     state.scrollHistory.length = 0;
     state.initialScroll = void 0;
+    state.isOptimizingItemPositions = false;
     set$(ctx, "scrollingTo", void 0);
+    if ((_a3 = state.props) == null ? void 0 : _a3.data) {
+      calculateItemsInView(ctx, state, { forceFullItemPositions: true });
+    }
   }
 }
 
@@ -1580,82 +1680,43 @@ function calculateRowMaxSize(ctx, state, startIndex, endIndex, useAverageSize) {
   return maxSize;
 }
 
-// src/utils/setPaddingTop.ts
-function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
-  if (stylePaddingTop !== void 0) {
-    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-    if (stylePaddingTop < prevStylePaddingTop) {
-      let prevTotalSize = peek$(ctx, "totalSize") || 0;
-      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
-      state.timeoutSetPaddingTop = setTimeout(() => {
-        prevTotalSize = peek$(ctx, "totalSize") || 0;
-        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
-      }, 16);
-    }
-    set$(ctx, "stylePaddingTop", stylePaddingTop);
-  }
-  if (alignItemsPaddingTop !== void 0) {
-    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
-  }
-}
-
-// src/utils/updateAlignItemsPaddingTop.ts
-function updateAlignItemsPaddingTop(ctx, state) {
-  const {
-    scrollLength,
-    props: { alignItemsAtEnd, data }
-  } = state;
-  if (alignItemsAtEnd) {
-    let alignItemsPaddingTop = 0;
-    if ((data == null ? void 0 : data.length) > 0) {
-      const contentSize = getContentSize(ctx);
-      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
-    }
-    setPaddingTop(ctx, state, { alignItemsPaddingTop });
-  }
-}
-
-// src/core/updateTotalSize.ts
-function updateTotalSize(ctx, state) {
-  const {
-    positions,
-    props: { data }
-  } = state;
-  if (data.length === 0) {
-    addTotalSize(ctx, state, null, 0);
-  } else {
-    const lastId = getId(state, data.length - 1);
-    if (lastId !== void 0) {
-      const lastPosition = positions.get(lastId);
-      if (lastPosition !== void 0) {
-        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
-        if (lastSize !== void 0) {
-          const totalSize = lastPosition + lastSize;
-          addTotalSize(ctx, state, null, totalSize);
+// src/utils/getScrollVelocity.ts
+var getScrollVelocity = (state) => {
+  const { scrollHistory } = state;
+  let velocity = 0;
+  if (scrollHistory.length >= 1) {
+    const newest = scrollHistory[scrollHistory.length - 1];
+    let oldest;
+    let start = 0;
+    const now = Date.now();
+    for (let i = 0; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      const nextEntry = scrollHistory[i + 1];
+      if (i > 0) {
+        const prevEntry = scrollHistory[i - 1];
+        const prevDirection = entry.scroll - prevEntry.scroll;
+        const currentDirection = nextEntry.scroll - entry.scroll;
+        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
+          start = i;
+          break;
         }
       }
     }
-  }
-}
-function addTotalSize(ctx, state, key, add) {
-  const { alignItemsAtEnd } = state.props;
-  const prevTotalSize = state.totalSize;
-  if (key === null) {
-    state.totalSize = add;
-    if (state.timeoutSetPaddingTop) {
-      clearTimeout(state.timeoutSetPaddingTop);
-      state.timeoutSetPaddingTop = void 0;
+    for (let i = start; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      if (now - entry.time <= 1e3) {
+        oldest = entry;
+        break;
+      }
     }
-  } else {
-    state.totalSize += add;
-  }
-  if (prevTotalSize !== state.totalSize) {
-    set$(ctx, "totalSize", state.totalSize);
-    if (alignItemsAtEnd) {
-      updateAlignItemsPaddingTop(ctx, state);
+    if (oldest && oldest !== newest) {
+      const scrollDiff = newest.scroll - oldest.scroll;
+      const timeDiff = newest.time - oldest.time;
+      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
     }
   }
-}
+  return velocity;
+};
 
 // src/utils/updateSnapToOffsets.ts
 function updateSnapToOffsets(ctx, state) {
@@ -1673,7 +1734,11 @@ function updateSnapToOffsets(ctx, state) {
 }
 
 // src/core/updateItemPositions.ts
-function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered } = { scrollBottomBuffered: -1, startIndex: 0 }) {
+function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered, forceFullUpdate = false } = {
+  forceFullUpdate: false,
+  scrollBottomBuffered: -1,
+  startIndex: 0
+}) {
   var _a3, _b, _c, _d;
   const {
     columns,
@@ -1689,6 +1754,8 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   const scrollingTo = peek$(ctx, "scrollingTo");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
+  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  state.isOptimizingItemPositions = shouldOptimize;
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
   let currentRowTop = 0;
@@ -1716,11 +1783,11 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   let didBreakEarly = false;
   let breakAt;
   for (let i = startIndex; i < dataLength; i++) {
-    if (breakAt && i > breakAt) {
+    if (shouldOptimize && breakAt !== void 0 && i > breakAt) {
       didBreakEarly = true;
       break;
     }
-    if (breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
+    if (shouldOptimize && breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
       const itemsPerRow = hasColumns ? numColumns : 1;
       breakAt = i + itemsPerRow + 10;
     }
@@ -2098,44 +2165,6 @@ function comparatorByDistance(a, b) {
   return b.distance - a.distance;
 }
 
-// src/utils/getScrollVelocity.ts
-var getScrollVelocity = (state) => {
-  const { scrollHistory } = state;
-  let velocity = 0;
-  if (scrollHistory.length >= 1) {
-    const newest = scrollHistory[scrollHistory.length - 1];
-    let oldest;
-    let start = 0;
-    const now = Date.now();
-    for (let i = 0; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      const nextEntry = scrollHistory[i + 1];
-      if (i > 0) {
-        const prevEntry = scrollHistory[i - 1];
-        const prevDirection = entry.scroll - prevEntry.scroll;
-        const currentDirection = nextEntry.scroll - entry.scroll;
-        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
-          start = i;
-          break;
-        }
-      }
-    }
-    for (let i = start; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      if (now - entry.time <= 1e3) {
-        oldest = entry;
-        break;
-      }
-    }
-    if (oldest && oldest !== newest) {
-      const scrollDiff = newest.scroll - oldest.scroll;
-      const timeDiff = newest.time - oldest.time;
-      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
-    }
-  }
-  return velocity;
-};
-
 // src/core/scrollToIndex.ts
 function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
   if (index >= state.props.data.length) {
@@ -2255,14 +2284,15 @@ function calculateItemsInView(ctx, state, params = {}) {
       enableScrollForNextCalculateItemsInView,
       idCache,
       indexByKey,
+      initialScroll,
       minIndexSizeChanged,
       positions,
+      props: { getItemType, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer },
       scrollForNextCalculateItemsInView,
       scrollLength,
       sizes,
       startBufferedId: startBufferedIdOrig,
-      viewabilityConfigCallbackPairs,
-      props: { getItemType, initialScroll, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer }
+      viewabilityConfigCallbackPairs
     } = state;
     const { data } = state.props;
     const stickyIndicesArr = state.props.stickyIndicesArr || [];
@@ -2274,7 +2304,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const totalSize = peek$(ctx, "totalSize");
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
-    const { dataChanged, doMVCP } = params;
+    const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const speed = getScrollVelocity(state);
     const scrollExtra = 0;
     const { queuedInitialLayout } = state;
@@ -2328,7 +2358,11 @@ function calculateItemsInView(ctx, state, params = {}) {
       positions.clear();
     }
     const startIndex = dataChanged ? 0 : (_b = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _b : 0;
-    updateItemPositions(ctx, state, dataChanged, { scrollBottomBuffered, startIndex });
+    updateItemPositions(ctx, state, dataChanged, {
+      forceFullUpdate: !!forceFullItemPositions,
+      scrollBottomBuffered,
+      startIndex
+    });
     if (minIndexSizeChanged !== void 0) {
       state.minIndexSizeChanged = void 0;
     }
@@ -2710,7 +2744,7 @@ function doInitialAllocateContainers(ctx, state) {
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
     if (state.lastLayout) {
-      if (state.props.initialScroll) {
+      if (state.initialScroll) {
         requestAnimationFrame(() => {
           calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
         });
@@ -2876,7 +2910,6 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
     if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
       shouldMaintainScrollAtEnd = true;
     }
-    addTotalSize(ctx, state, itemKey, diff);
     onItemSizeChanged == null ? void 0 : onItemSizeChanged({
       index,
       itemData: state.props.data[index],
@@ -2941,7 +2974,7 @@ function updateOneItemSize(ctx, state, itemKey, sizeObj) {
     averages.num++;
   }
   if (!prevSize || Math.abs(prevSize - size) > 0.1) {
-    sizes.set(itemKey, size);
+    setSize(ctx, state, itemKey, size);
     return size - prevSize;
   }
   return 0;
@@ -3168,6 +3201,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         idsInView: [],
         indexByKey: /* @__PURE__ */ new Map(),
         initialScroll: initialScrollProp,
+        isOptimizingItemPositions: false,
         isAtEnd: false,
         isAtStart: false,
         isEndReached: false,
@@ -3311,6 +3345,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       );
       refState.current.sizes.clear();
       refState.current.positions.clear();
+      refState.current.totalSize = 0;
+      set$(ctx, "totalSize", 0);
     }
   }
   const onLayoutHeader = useCallback((rect, fromLayoutEffect) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "2.1.0-beta.5",
+  "version": "2.1.0-beta.6",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,