@legendapp/list 3.3.6 → 3.3.8

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 3.3.8
+
+- Feat: Add `experimental_hideItemsUntilMeasured` to make items never display at provisional layouts and wait for correct sizing, at the cost of an extra render per recycled row. This fixes cases where slow item renders could display with gaps/overlaps when scrolling up quickly on slow phones.
+
+## 3.3.7
+
+- Fix: Recycled rows no longer briefly show content from the wrong item when data is prepended.
+
 ## 3.3.6
 
 - Fix: Animated `maintainScrollAtEnd` follows rapid and first-load content growth, including short `alignItemsAtEnd` lists, and stops when the user scrolls away.

package/animated.d.ts

@@ -8,7 +8,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerLayoutReady${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -47,6 +47,8 @@ type ListenerTypeValueMap = {
     adaptiveRender: "normal" | "light";
 } & {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
+} & {
+    [K in ListenerType as K extends `containerLayoutReady${number}` ? K : never]: boolean;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
 } & {
@@ -348,6 +350,20 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Configures the adaptive render signal. Items can use this to render a lighter version while scrolling quickly.
      */
     experimental_adaptiveRender?: AdaptiveRenderConfig;
+    /**
+     * Keeps a newly recycled item laid out but invisible until its size has been measured, so it is never painted at
+     * the estimated position it was recycled to. Only applies on the new architecture.
+     *
+     * This trades a possible flash at the wrong position for an extra render and native commit per recycled row, so it
+     * is worth enabling only for lists with dynamically sized items whose estimates are visibly wrong. Items with a
+     * size from `getFixedItemSize`, or with an already measured size, are exact and render immediately either way.
+     *
+     * Sticky headers are intentionally excluded. They are painted from a scroll-driven interpolation rather than the
+     * committed position, so hiding them would blink a header out mid-scroll without preventing a flash.
+     *
+     * @default false
+     */
+    experimental_hideItemsUntilMeasured?: boolean;
     /**
      * Function to call when the user pulls to refresh.
      */

package/keyboard-legacy.d.ts

@@ -9,7 +9,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerLayoutReady${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -48,6 +48,8 @@ type ListenerTypeValueMap = {
     adaptiveRender: "normal" | "light";
 } & {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
+} & {
+    [K in ListenerType as K extends `containerLayoutReady${number}` ? K : never]: boolean;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
 } & {

package/keyboard.d.ts

@@ -10,7 +10,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerLayoutReady${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -49,6 +49,8 @@ type ListenerTypeValueMap = {
     adaptiveRender: "normal" | "light";
 } & {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
+} & {
+    [K in ListenerType as K extends `containerLayoutReady${number}` ? K : never]: boolean;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
 } & {

package/package.json

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

package/react-native.d.ts

@@ -8,7 +8,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "containerLayoutEpoch" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemIndex${number}` | `containerItemKey${number}` | `containerLayoutReady${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -47,6 +47,8 @@ type ListenerTypeValueMap = {
     adaptiveRender: "normal" | "light";
 } & {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
+} & {
+    [K in ListenerType as K extends `containerLayoutReady${number}` ? K : never]: boolean;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
 } & {
@@ -348,6 +350,20 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Configures the adaptive render signal. Items can use this to render a lighter version while scrolling quickly.
      */
     experimental_adaptiveRender?: AdaptiveRenderConfig;
+    /**
+     * Keeps a newly recycled item laid out but invisible until its size has been measured, so it is never painted at
+     * the estimated position it was recycled to. Only applies on the new architecture.
+     *
+     * This trades a possible flash at the wrong position for an extra render and native commit per recycled row, so it
+     * is worth enabling only for lists with dynamically sized items whose estimates are visibly wrong. Items with a
+     * size from `getFixedItemSize`, or with an already measured size, are exact and render immediately either way.
+     *
+     * Sticky headers are intentionally excluded. They are painted from a scroll-driven interpolation rather than the
+     * committed position, so hiding them would blink a header out mid-scroll without preventing a flash.
+     *
+     * @default false
+     */
+    experimental_hideItemsUntilMeasured?: boolean;
     /**
      * Function to call when the user pulls to refresh.
      */

package/react-native.js

@@ -401,6 +401,7 @@ var IsNewArchitecture = f !== void 0 && f != null;
 // src/core/containerItemMetadata.ts
 function createContainerItemMetadata(state, itemIndex, itemData, itemType) {
   return {
+    data: state.props.data,
     dataChangeEpoch: state.dataChangeEpoch,
     getFixedItemSize: state.props.getFixedItemSize,
     getItemType: state.props.getItemType,
@@ -409,25 +410,29 @@ function createContainerItemMetadata(state, itemIndex, itemData, itemType) {
     itemType
   };
 }
-function resolveContainerItemMetadata(state, containerId, itemIndex, itemData) {
-  var _a3, _b;
-  const { getFixedItemSize, getItemType } = state.props;
+function updateContainerItemMetadata(state, containerId, itemIndex, itemData, itemType) {
+  var _a3;
+  const { getItemType } = state.props;
   const previousMetadata = state.containerItemMetadata.get(containerId);
-  let metadata;
   if ((previousMetadata == null ? void 0 : previousMetadata.dataChangeEpoch) === state.dataChangeEpoch && previousMetadata.getItemType === getItemType && previousMetadata.itemData === itemData && previousMetadata.itemIndex === itemIndex) {
-    metadata = previousMetadata;
-  } else {
-    const itemType = getItemType ? (_a3 = getItemType(itemData, itemIndex)) != null ? _a3 : "" : void 0;
-    metadata = createContainerItemMetadata(state, itemIndex, itemData, itemType);
-    state.containerItemMetadata.set(containerId, metadata);
+    return previousMetadata;
   }
+  const resolvedItemType = getItemType ? (_a3 = getItemType(itemData, itemIndex)) != null ? _a3 : "" : void 0;
+  const metadata = createContainerItemMetadata(state, itemIndex, itemData, resolvedItemType);
+  state.containerItemMetadata.set(containerId, metadata);
+  return metadata;
+}
+function resolveContainerItemMetadata(state, containerId, itemIndex, itemData) {
+  var _a3;
+  const { getFixedItemSize } = state.props;
+  const metadata = updateContainerItemMetadata(state, containerId, itemIndex, itemData);
   if (metadata.getFixedItemSize !== getFixedItemSize) {
     metadata.didResolveFixedItemSize = false;
     metadata.fixedItemSize = void 0;
     metadata.getFixedItemSize = getFixedItemSize;
   }
   if (getFixedItemSize && !metadata.didResolveFixedItemSize) {
-    metadata.fixedItemSize = getFixedItemSize(itemData, itemIndex, (_b = metadata.itemType) != null ? _b : "");
+    metadata.fixedItemSize = getFixedItemSize(itemData, itemIndex, (_a3 = metadata.itemType) != null ? _a3 : "");
     metadata.didResolveFixedItemSize = true;
   }
   return metadata;
@@ -3294,6 +3299,7 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
     return { didChangePosition: false, didRefreshData: false };
   }
   const itemKey = (_a3 = state.idCache[itemIndex]) != null ? _a3 : getId(state, itemIndex);
+  const metadata = updateContainerItemMetadata(state, containerIndex, itemIndex, item);
   const updateLayout = (_b = options == null ? void 0 : options.updateLayout) != null ? _b : true;
   let didChangePosition = false;
   let didRefreshData = false;
@@ -3304,7 +3310,7 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       return { didChangePosition: false, didRefreshData: false };
     }
     const logicalPosition = (positionValue || 0) - ((_c = options == null ? void 0 : options.scrollAdjustPending) != null ? _c : 0);
-    const itemSize = (_d = state.sizes.get(itemKey)) != null ? _d : getItemSize(ctx, itemKey, itemIndex, item);
+    const itemSize = (_d = state.sizes.get(itemKey)) != null ? _d : getItemSize(ctx, itemKey, itemIndex, item, void 0, void 0, void 0, metadata);
     const position = toPhysicalHorizontalItemPosition(state, logicalPosition, itemSize, peek$(ctx, "totalSize"));
     const column = columns[itemIndex] || 1;
     const span = columnSpans[itemIndex] || 1;
@@ -4590,18 +4596,22 @@ function calculateItemsInView(ctx, params = {}) {
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
           }
+          state.containerItemMetadata.set(
+            containerIndex,
+            createContainerItemMetadata(state, i, data[i], allocation.itemType)
+          );
           if (oldKey !== id) {
             changedContainerIds != null ? changedContainerIds : changedContainerIds = /* @__PURE__ */ new Set();
             changedContainerIds.add(containerIndex);
             state.containerItemGenerations[containerIndex] = ((_p = state.containerItemGenerations[containerIndex]) != null ? _p : 0) + 1;
+            if (state.props.hideItemsUntilMeasured) {
+              const isLayoutReady = state.sizesKnown.has(id) || resolveContainerItemMetadata(state, containerIndex, i, data[i]).fixedItemSize !== void 0;
+              set$(ctx, `containerLayoutReady${containerIndex}`, isLayoutReady);
+            }
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemIndex${containerIndex}`, i);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
-          state.containerItemMetadata.set(
-            containerIndex,
-            createContainerItemMetadata(state, i, data[i], allocation.itemType)
-          );
           containerItemKeys.set(id, containerIndex);
           (_q = state.userScrollAnchorReset) == null ? void 0 : _q.keys.add(id);
           const containerSticky = `containerSticky${containerIndex}`;
@@ -5030,24 +5040,39 @@ function resolveSkippedAnchorReset(ctx, itemKey) {
     state.userScrollAnchorReset = void 0;
   }
 }
+function revealMeasuredGeneration(ctx, containerId, itemKey, generation) {
+  var _a3;
+  if (!ctx.state.props.hideItemsUntilMeasured) {
+    return;
+  }
+  const isCurrentGeneration = ((_a3 = ctx.state.containerItemGenerations[containerId]) != null ? _a3 : 0) === generation;
+  const isCurrentAssignment = peek$(ctx, `containerItemKey${containerId}`) === itemKey;
+  if (isCurrentGeneration && isCurrentAssignment) {
+    set$(ctx, `containerLayoutReady${containerId}`, true);
+  }
+}
 function measureContainersInLayoutEffect(ctx, targetContainerIds = null) {
-  var _a3, _b, _c;
+  var _a3, _b;
   const state = ctx.state;
   const measurements = [];
+  const measuredGenerations = state.props.hideItemsUntilMeasured ? [] : void 0;
   let isCollectingSynchronousMeasurements = true;
   const containerIds = targetContainerIds != null ? targetContainerIds : ctx.viewRefs.keys();
   for (const containerId of containerIds) {
-    const viewRef = ctx.viewRefs.get(containerId);
+    const view = (_a3 = ctx.viewRefs.get(containerId)) == null ? void 0 : _a3.current;
     const itemKey = peek$(ctx, `containerItemKey${containerId}`);
     if (itemKey !== void 0) {
-      const generation = ((_a3 = state.containerItemGenerations[containerId]) != null ? _a3 : 0) + 1;
+      const generation = ((_b = state.containerItemGenerations[containerId]) != null ? _b : 0) + 1;
       state.containerItemGenerations[containerId] = generation;
       const fixedItemSize = resolveFixedItemSize(ctx, containerId, itemKey);
       const canSkipMeasurement = !state.needsOtherAxisSize && fixedItemSize !== void 0 && state.sizesKnown.get(itemKey) === fixedItemSize + ctx.scrollAxisGap;
       if (canSkipMeasurement) {
         resolveSkippedAnchorReset(ctx, itemKey);
-      } else if (viewRef) {
-        (_c = (_b = viewRef.current) == null ? void 0 : _b.measure) == null ? void 0 : _c.call(_b, (_x, _y, width, height) => {
+        if (measuredGenerations) {
+          revealMeasuredGeneration(ctx, containerId, itemKey, generation);
+        }
+      } else if (view == null ? void 0 : view.measure) {
+        view.measure((_x, _y, width, height) => {
           var _a4;
           const isCurrentGeneration = ((_a4 = ctx.state.containerItemGenerations[containerId]) != null ? _a4 : 0) === generation;
           if (isCurrentGeneration) {
@@ -5058,17 +5083,28 @@ function measureContainersInLayoutEffect(ctx, targetContainerIds = null) {
             };
             if (isCollectingSynchronousMeasurements) {
               measurements.push(measurement);
+              measuredGenerations == null ? void 0 : measuredGenerations.push({ containerId, generation, itemKey });
             } else {
               updateItemSizes(ctx, measurement);
+              if (measuredGenerations) {
+                revealMeasuredGeneration(ctx, containerId, itemKey, generation);
+              }
             }
           }
         });
+      } else if (measuredGenerations) {
+        revealMeasuredGeneration(ctx, containerId, itemKey, generation);
       }
     }
   }
   isCollectingSynchronousMeasurements = false;
   if (measurements.length > 0) {
     updateItemSizesBatch(ctx, measurements);
+    if (measuredGenerations) {
+      for (const { containerId, generation, itemKey } of measuredGenerations) {
+        revealMeasuredGeneration(ctx, containerId, itemKey, generation);
+      }
+    }
   }
 }
 var typedForwardRef = React2__namespace.forwardRef;
@@ -5156,8 +5192,20 @@ var PositionViewState = typedMemo(function PositionViewState2({
   refView,
   ...rest
 }) {
-  const [position = POSITION_OUT_OF_VIEW, _itemKey] = useArr$([`containerPosition${id}`, `containerItemKey${id}`]);
-  return /* @__PURE__ */ React2__namespace.createElement(ReactNative.View, { ref: refView, style: [style, horizontal ? { left: position } : { top: position }], ...rest });
+  const [position = POSITION_OUT_OF_VIEW, _itemKey, layoutReady = true] = useArr$([
+    `containerPosition${id}`,
+    `containerItemKey${id}`,
+    `containerLayoutReady${id}`
+  ]);
+  return /* @__PURE__ */ React2__namespace.createElement(
+    ReactNative.View,
+    {
+      ref: refView,
+      style: [style, horizontal ? { left: position } : { top: position }, !layoutReady && { opacity: 0 }],
+      ...rest,
+      pointerEvents: layoutReady ? void 0 : "none"
+    }
+  );
 });
 var PositionViewAnimated = typedMemo(function PositionViewAnimated2({
   id,
@@ -5744,7 +5792,7 @@ var Container = typedMemo(function Container2({
     ]
   );
   const renderedItemInfo = React2.useMemo(
-    () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
+    () => itemKey !== void 0 ? getRenderedItem2(itemKey, id) : null,
     [itemKey, data, extraData]
   );
   const { renderedItem } = renderedItemInfo || {};
@@ -6285,6 +6333,16 @@ function checkStructuralDataChange(state, dataProp, previousData) {
   return false;
 }
 
+// src/core/containerLayoutReady.ts
+var CONTAINER_LAYOUT_READY_PREFIX = "containerLayoutReady";
+function resetContainerLayoutReady(ctx) {
+  for (const signalName of ctx.values.keys()) {
+    if (signalName.startsWith(CONTAINER_LAYOUT_READY_PREFIX)) {
+      set$(ctx, signalName, void 0);
+    }
+  }
+}
+
 // src/core/doInitialAllocateContainers.ts
 function doInitialAllocateContainers(ctx) {
   var _a3, _b;
@@ -6995,34 +7053,37 @@ function getAlwaysRenderIndices(config, data, keyExtractor, anchoredEndSpaceAnch
 }
 
 // src/utils/getRenderedItem.ts
-function getRenderedItem(ctx, key) {
-  var _a3;
+function getRenderedItem(ctx, key, containerId) {
+  var _a3, _b, _c;
   const state = ctx.state;
   if (!state) {
     return null;
   }
+  const metadata = state.containerItemMetadata.get(containerId);
+  const useAssignedGeneration = metadata && metadata.dataChangeEpoch !== state.dataChangeEpoch;
   const {
     indexByKey,
-    props: { data, getItemType, renderItem }
+    props: { data: currentData, getItemType, renderItem }
   } = state;
-  const index = indexByKey.get(key);
+  const data = useAssignedGeneration ? metadata.data : currentData;
+  const index = (_a3 = metadata == null ? void 0 : metadata.itemIndex) != null ? _a3 : indexByKey.get(key);
   if (index === void 0) {
     return null;
   }
   let renderedItem = null;
   const extraData = peek$(ctx, "extraData");
-  const item = data[index];
+  const item = useAssignedGeneration ? metadata.itemData : data[index];
   if (renderItem && !isNullOrUndefined(item)) {
     const itemProps = {
       data,
       extraData,
       index,
       item,
-      type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
+      type: useAssignedGeneration ? (_b = metadata.itemType) != null ? _b : "" : getItemType ? (_c = getItemType(item, index)) != null ? _c : "" : ""
     };
     renderedItem = renderItem(itemProps);
   }
-  return { index, item: data[index], renderedItem };
+  return { index, item, renderedItem };
 }
 
 // src/utils/normalizeMaintainScrollAtEnd.ts
@@ -7188,6 +7249,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
     experimental_adaptiveRender,
+    experimental_hideItemsUntilMeasured,
     itemsAreEqual,
     keyExtractor: keyExtractorProp,
     ListEmptyComponent,
@@ -7408,6 +7470,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const state = refState.current;
   const isFirstLocal = state.isFirst;
   const previousAdaptiveRender = state.props.adaptiveRender;
+  const previousHideItemsUntilMeasured = state.props.hideItemsUntilMeasured;
   const previousNumColumnsProp = state.props.numColumns;
   const didScrollAxisGapChange = !isFirstLocal && ctx.scrollAxisGap !== nextScrollAxisGap;
   ctx.scrollAxisGap = nextScrollAxisGap;
@@ -7453,6 +7516,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     estimatedItemSize,
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
     getItemType: useWrapIfItem(getItemType),
+    hideItemsUntilMeasured: experimental_hideItemsUntilMeasured,
     horizontal: !!horizontal,
     itemsAreEqual,
     keyExtractor: useWrapIfItem(keyExtractor),
@@ -7490,6 +7554,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (!isFirstLocal && previousAdaptiveRender && !experimental_adaptiveRender) {
     resetAdaptiveRender(ctx);
   }
+  if (!isFirstLocal && previousHideItemsUntilMeasured && !experimental_hideItemsUntilMeasured) {
+    resetContainerLayoutReady(ctx);
+  }
   const memoizedLastItemKeys = React2.useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
@@ -7746,7 +7813,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [ctx, usesBootstrapInitialScroll]);
   const fns = React2.useMemo(
     () => ({
-      getRenderedItem: (key) => getRenderedItem(ctx, key),
+      getRenderedItem: (key, containerId) => getRenderedItem(ctx, key, containerId),
       onMomentumScrollEnd: (event) => {
         checkFinishedScrollFallback(ctx);
         if (state.props.onMomentumScrollEnd) {