@legendapp/list 3.3.6 → 3.3.8

package/react-native.web.mjs

@@ -2931,6 +2931,7 @@ function abortBootstrapInitialScroll(ctx) {
 // 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,
@@ -2939,25 +2940,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;
@@ -3302,6 +3307,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;
@@ -3312,7 +3318,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;
@@ -4598,18 +4604,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}`;
@@ -5672,7 +5682,7 @@ var Container = typedMemo(function Container2({
     ]
   );
   const renderedItemInfo = useMemo(
-    () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
+    () => itemKey !== void 0 ? getRenderedItem2(itemKey, id) : null,
     [itemKey, data, extraData]
   );
   const { renderedItem } = renderedItemInfo || {};
@@ -6923,6 +6933,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;
@@ -7617,34 +7637,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
@@ -7810,6 +7833,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
     experimental_adaptiveRender,
+    experimental_hideItemsUntilMeasured,
     itemsAreEqual,
     keyExtractor: keyExtractorProp,
     ListEmptyComponent,
@@ -8030,6 +8054,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;
@@ -8075,6 +8100,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     estimatedItemSize,
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
     getItemType: useWrapIfItem(getItemType),
+    hideItemsUntilMeasured: experimental_hideItemsUntilMeasured,
     horizontal: !!horizontal,
     itemsAreEqual,
     keyExtractor: useWrapIfItem(keyExtractor),
@@ -8112,6 +8138,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (!isFirstLocal && previousAdaptiveRender && !experimental_adaptiveRender) {
     resetAdaptiveRender(ctx);
   }
+  if (!isFirstLocal && previousHideItemsUntilMeasured && !experimental_hideItemsUntilMeasured) {
+    resetContainerLayoutReady(ctx);
+  }
   const memoizedLastItemKeys = useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
@@ -8360,7 +8389,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [ctx, usesBootstrapInitialScroll]);
   const fns = useMemo(
     () => ({
-      getRenderedItem: (key) => getRenderedItem(ctx, key),
+      getRenderedItem: (key, containerId) => getRenderedItem(ctx, key, containerId),
       onMomentumScrollEnd: (event) => {
         checkFinishedScrollFallback(ctx);
         if (state.props.onMomentumScrollEnd) {

package/react.d.ts

@@ -31,7 +31,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;
@@ -70,6 +70,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;
 } & {
@@ -371,6 +373,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.js

@@ -2952,6 +2952,7 @@ function abortBootstrapInitialScroll(ctx) {
 // 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,
@@ -2960,25 +2961,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;
@@ -3323,6 +3328,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;
@@ -3333,7 +3339,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;
@@ -4619,18 +4625,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}`;
@@ -5693,7 +5703,7 @@ var Container = typedMemo(function Container2({
     ]
   );
   const renderedItemInfo = React3.useMemo(
-    () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
+    () => itemKey !== void 0 ? getRenderedItem2(itemKey, id) : null,
     [itemKey, data, extraData]
   );
   const { renderedItem } = renderedItemInfo || {};
@@ -6944,6 +6954,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;
@@ -7638,34 +7658,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
@@ -7831,6 +7854,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
     experimental_adaptiveRender,
+    experimental_hideItemsUntilMeasured,
     itemsAreEqual,
     keyExtractor: keyExtractorProp,
     ListEmptyComponent,
@@ -8051,6 +8075,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;
@@ -8096,6 +8121,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     estimatedItemSize,
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
     getItemType: useWrapIfItem(getItemType),
+    hideItemsUntilMeasured: experimental_hideItemsUntilMeasured,
     horizontal: !!horizontal,
     itemsAreEqual,
     keyExtractor: useWrapIfItem(keyExtractor),
@@ -8133,6 +8159,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (!isFirstLocal && previousAdaptiveRender && !experimental_adaptiveRender) {
     resetAdaptiveRender(ctx);
   }
+  if (!isFirstLocal && previousHideItemsUntilMeasured && !experimental_hideItemsUntilMeasured) {
+    resetContainerLayoutReady(ctx);
+  }
   const memoizedLastItemKeys = React3.useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
@@ -8381,7 +8410,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [ctx, usesBootstrapInitialScroll]);
   const fns = React3.useMemo(
     () => ({
-      getRenderedItem: (key) => getRenderedItem(ctx, key),
+      getRenderedItem: (key, containerId) => getRenderedItem(ctx, key, containerId),
       onMomentumScrollEnd: (event) => {
         checkFinishedScrollFallback(ctx);
         if (state.props.onMomentumScrollEnd) {

package/react.mjs

@@ -2931,6 +2931,7 @@ function abortBootstrapInitialScroll(ctx) {
 // 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,
@@ -2939,25 +2940,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;
@@ -3302,6 +3307,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;
@@ -3312,7 +3318,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;
@@ -4598,18 +4604,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}`;
@@ -5672,7 +5682,7 @@ var Container = typedMemo(function Container2({
     ]
   );
   const renderedItemInfo = useMemo(
-    () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
+    () => itemKey !== void 0 ? getRenderedItem2(itemKey, id) : null,
     [itemKey, data, extraData]
   );
   const { renderedItem } = renderedItemInfo || {};
@@ -6923,6 +6933,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;
@@ -7617,34 +7637,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
@@ -7810,6 +7833,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
     experimental_adaptiveRender,
+    experimental_hideItemsUntilMeasured,
     itemsAreEqual,
     keyExtractor: keyExtractorProp,
     ListEmptyComponent,
@@ -8030,6 +8054,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;
@@ -8075,6 +8100,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     estimatedItemSize,
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
     getItemType: useWrapIfItem(getItemType),
+    hideItemsUntilMeasured: experimental_hideItemsUntilMeasured,
     horizontal: !!horizontal,
     itemsAreEqual,
     keyExtractor: useWrapIfItem(keyExtractor),
@@ -8112,6 +8138,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (!isFirstLocal && previousAdaptiveRender && !experimental_adaptiveRender) {
     resetAdaptiveRender(ctx);
   }
+  if (!isFirstLocal && previousHideItemsUntilMeasured && !experimental_hideItemsUntilMeasured) {
+    resetContainerLayoutReady(ctx);
+  }
   const memoizedLastItemKeys = useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
@@ -8360,7 +8389,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [ctx, usesBootstrapInitialScroll]);
   const fns = useMemo(
     () => ({
-      getRenderedItem: (key) => getRenderedItem(ctx, key),
+      getRenderedItem: (key, containerId) => getRenderedItem(ctx, key, containerId),
       onMomentumScrollEnd: (event) => {
         checkFinishedScrollFallback(ctx);
         if (state.props.onMomentumScrollEnd) {