[HOLD on #100733] [LegendList 13/15] feat: add chat pagination loading indicators

jest/setupMockLegendList.ts

@@ -32,6 +32,7 @@ export default function setupMockLegendList() {
                     onEndReached,
                     onEndReachedThreshold = 0.5,
                     onLoad,
+                    onReady,
                     onScroll,
                     onStartReached,
                     onStartReachedThreshold = 0.5,
@@ -42,12 +43,15 @@ export default function setupMockLegendList() {
                 ref,
             ) => {
                 const onLoadRef = ReactActual.useRef(onLoad);
+                const onReadyRef = ReactActual.useRef(onReady);
                 const listMetricsRef = ReactActual.useRef<{contentLength: number; scroll: number; scrollLength: number} | undefined>(undefined);
                 const reachedEdgesRef = ReactActual.useRef({end: false, start: false});
                 onLoadRef.current = onLoad;
+                onReadyRef.current = onReady;
 
                 ReactActual.useEffect(() => {
                     onLoadRef.current?.({elapsedTimeInMs: 0});
+                    onReadyRef.current?.();
                 }, []);
 
                 ReactActual.useImperativeHandle(
@@ -62,6 +66,7 @@ export default function setupMockLegendList() {
                         getState: () => ({
                             data: data ?? [],
                             elementAtIndex: () => undefined,
+                            positionByKey: () => undefined,
                             endBuffered: (data?.length ?? 0) - 1,
                             startBuffered: 0,
                             ...listMetricsRef.current,

package.json

@@ -106,7 +106,7 @@
     "@fullstory/react-native": "^1.10.2",
     "@gorhom/portal": "^1.0.14",
     "@invertase/react-native-apple-authentication": "^2.5.0",
-    "@legendapp/list": "^3.7.0",
+    "@legendapp/list": "^3.7.2",
     "@lottiefiles/dotlottie-react": "0.13.5",
     "@onfido/react-native-sdk": "15.1.0",
     "@pusher/pusher-websocket-react-native": "^1.3.1",

patches/@legendapp/list/@legendapp+list+3.7.2+001+apply-pending-anchor-correction.patch

@@ -0,0 +1,104 @@
+diff --git a/node_modules/@legendapp/list/react-native.web.js b/node_modules/@legendapp/list/react-native.web.js
+index 5155454..c102661 100644
+--- a/node_modules/@legendapp/list/react-native.web.js
++++ b/node_modules/@legendapp/list/react-native.web.js
+@@ -4843,7 +4843,8 @@ function calculateItemsInView(ctx, params = {}) {
+     const stickyHeaderIndicesArr = state.props.stickyHeaderIndicesArr || [];
+     const stickyHeaderIndicesSet = state.props.stickyHeaderIndicesSet || /* @__PURE__ */ new Set();
+     const drawDistance = getEffectiveDrawDistance(ctx, params.drawDistanceMode);
+-    const { dataChanged, doMVCP, forceFullItemPositions, mvcpAdjustmentSource } = params;
++    const { dataChanged, forceFullItemPositions } = params;
++    let { doMVCP, mvcpAdjustmentSource } = params;
+     const bootstrapInitialScrollState = ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" ? state.initialScrollSession.bootstrap : void 0;
+     const suppressInitialScrollSideEffects = !!bootstrapInitialScrollState;
+     const prevNumContainers = peek$(ctx, "numContainers");
+@@ -4943,6 +4944,11 @@ function calculateItemsInView(ctx, params = {}) {
+         }
+       }
+     }
++    if (!doMVCP && state.scheduledWork.has("mvcpRecalculate")) {
++      state.scheduledWork.cancel("mvcpRecalculate");
++      doMVCP = true;
++      mvcpAdjustmentSource = "item-size";
++    }
+     const checkMVCP = doMVCP && !suppressInitialScrollSideEffects ? prepareMVCP(ctx, dataChanged, mvcpAdjustmentSource) : void 0;
+     if (dataChanged) {
+       resetLayoutCachesForDataChange(state);
+diff --git a/node_modules/@legendapp/list/react-native.web.mjs b/node_modules/@legendapp/list/react-native.web.mjs
+index ce08abe..ff71fd6 100644
+--- a/node_modules/@legendapp/list/react-native.web.mjs
++++ b/node_modules/@legendapp/list/react-native.web.mjs
+@@ -4822,7 +4822,8 @@ function calculateItemsInView(ctx, params = {}) {
+     const stickyHeaderIndicesArr = state.props.stickyHeaderIndicesArr || [];
+     const stickyHeaderIndicesSet = state.props.stickyHeaderIndicesSet || /* @__PURE__ */ new Set();
+     const drawDistance = getEffectiveDrawDistance(ctx, params.drawDistanceMode);
+-    const { dataChanged, doMVCP, forceFullItemPositions, mvcpAdjustmentSource } = params;
++    const { dataChanged, forceFullItemPositions } = params;
++    let { doMVCP, mvcpAdjustmentSource } = params;
+     const bootstrapInitialScrollState = ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" ? state.initialScrollSession.bootstrap : void 0;
+     const suppressInitialScrollSideEffects = !!bootstrapInitialScrollState;
+     const prevNumContainers = peek$(ctx, "numContainers");
+@@ -4922,6 +4923,11 @@ function calculateItemsInView(ctx, params = {}) {
+         }
+       }
+     }
++    if (!doMVCP && state.scheduledWork.has("mvcpRecalculate")) {
++      state.scheduledWork.cancel("mvcpRecalculate");
++      doMVCP = true;
++      mvcpAdjustmentSource = "item-size";
++    }
+     const checkMVCP = doMVCP && !suppressInitialScrollSideEffects ? prepareMVCP(ctx, dataChanged, mvcpAdjustmentSource) : void 0;
+     if (dataChanged) {
+       resetLayoutCachesForDataChange(state);
+diff --git a/node_modules/@legendapp/list/react.js b/node_modules/@legendapp/list/react.js
+index 5155454..c102661 100644
+--- a/node_modules/@legendapp/list/react.js
++++ b/node_modules/@legendapp/list/react.js
+@@ -4843,7 +4843,8 @@ function calculateItemsInView(ctx, params = {}) {
+     const stickyHeaderIndicesArr = state.props.stickyHeaderIndicesArr || [];
+     const stickyHeaderIndicesSet = state.props.stickyHeaderIndicesSet || /* @__PURE__ */ new Set();
+     const drawDistance = getEffectiveDrawDistance(ctx, params.drawDistanceMode);
+-    const { dataChanged, doMVCP, forceFullItemPositions, mvcpAdjustmentSource } = params;
++    const { dataChanged, forceFullItemPositions } = params;
++    let { doMVCP, mvcpAdjustmentSource } = params;
+     const bootstrapInitialScrollState = ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" ? state.initialScrollSession.bootstrap : void 0;
+     const suppressInitialScrollSideEffects = !!bootstrapInitialScrollState;
+     const prevNumContainers = peek$(ctx, "numContainers");
+@@ -4943,6 +4944,11 @@ function calculateItemsInView(ctx, params = {}) {
+         }
+       }
+     }
++    if (!doMVCP && state.scheduledWork.has("mvcpRecalculate")) {
++      state.scheduledWork.cancel("mvcpRecalculate");
++      doMVCP = true;
++      mvcpAdjustmentSource = "item-size";
++    }
+     const checkMVCP = doMVCP && !suppressInitialScrollSideEffects ? prepareMVCP(ctx, dataChanged, mvcpAdjustmentSource) : void 0;
+     if (dataChanged) {
+       resetLayoutCachesForDataChange(state);
+diff --git a/node_modules/@legendapp/list/react.mjs b/node_modules/@legendapp/list/react.mjs
+index ce08abe..ff71fd6 100644
+--- a/node_modules/@legendapp/list/react.mjs
++++ b/node_modules/@legendapp/list/react.mjs
+@@ -4822,7 +4822,8 @@ function calculateItemsInView(ctx, params = {}) {
+     const stickyHeaderIndicesArr = state.props.stickyHeaderIndicesArr || [];
+     const stickyHeaderIndicesSet = state.props.stickyHeaderIndicesSet || /* @__PURE__ */ new Set();
+     const drawDistance = getEffectiveDrawDistance(ctx, params.drawDistanceMode);
+-    const { dataChanged, doMVCP, forceFullItemPositions, mvcpAdjustmentSource } = params;
++    const { dataChanged, forceFullItemPositions } = params;
++    let { doMVCP, mvcpAdjustmentSource } = params;
+     const bootstrapInitialScrollState = ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" ? state.initialScrollSession.bootstrap : void 0;
+     const suppressInitialScrollSideEffects = !!bootstrapInitialScrollState;
+     const prevNumContainers = peek$(ctx, "numContainers");
+@@ -4922,6 +4923,11 @@ function calculateItemsInView(ctx, params = {}) {
+         }
+       }
+     }
++    if (!doMVCP && state.scheduledWork.has("mvcpRecalculate")) {
++      state.scheduledWork.cancel("mvcpRecalculate");
++      doMVCP = true;
++      mvcpAdjustmentSource = "item-size";
++    }
+     const checkMVCP = doMVCP && !suppressInitialScrollSideEffects ? prepareMVCP(ctx, dataChanged, mvcpAdjustmentSource) : void 0;
+     if (dataChanged) {
+       resetLayoutCachesForDataChange(state);

patches/@legendapp/list/@legendapp+list+3.7.2+002+anchor-end-aligned-lists-to-last-visible-item.patch

@@ -0,0 +1,108 @@
+diff --git a/node_modules/@legendapp/list/react-native.web.js b/node_modules/@legendapp/list/react-native.web.js
+index c102661..99cac83 100644
+--- a/node_modules/@legendapp/list/react-native.web.js
++++ b/node_modules/@legendapp/list/react-native.web.js
+@@ -1706,6 +1706,7 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+   const {
+     maintainVisibleContentPosition: { data: mvcpData, size: mvcpScroll, shouldRestorePosition }
+   } = props;
++  const anchorIdsInView = props.alignItemsAtEnd ? [...idsInView].reverse() : idsInView;
+   const now = Date.now();
+   const enableMVCPAnchorLock = (!!dataChanged || !!state.mvcpAnchorLock);
+   const scrollingTo = state.scrollingTo;
+@@ -1743,11 +1744,11 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+     } else if (scrollTarget !== void 0) {
+       targetId = (_c = scrollingTo == null ? void 0 : scrollingTo.key) != null ? _c : getId(state, scrollTarget);
+     } else if (idsInView.length > 0 && state.didContainersLayout && !dataChanged) {
+-      targetId = idsInView.find((id) => indexByKey.get(id) !== void 0);
++      targetId = anchorIdsInView.find((id) => indexByKey.get(id) !== void 0);
+     }
+     if (dataChanged && idsInView.length > 0 && state.didContainersLayout) {
+-      for (let i = 0; i < idsInView.length; i++) {
+-        const id = idsInView[i];
++      for (let i = 0; i < anchorIdsInView.length; i++) {
++        const id = anchorIdsInView[i];
+         const index = previousIndexByKey.get(id);
+         if (index !== void 0) {
+           const position = positions[index];
+diff --git a/node_modules/@legendapp/list/react-native.web.mjs b/node_modules/@legendapp/list/react-native.web.mjs
+index ff71fd6..a7a89dd 100644
+--- a/node_modules/@legendapp/list/react-native.web.mjs
++++ b/node_modules/@legendapp/list/react-native.web.mjs
+@@ -1685,6 +1685,7 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+   const {
+     maintainVisibleContentPosition: { data: mvcpData, size: mvcpScroll, shouldRestorePosition }
+   } = props;
++  const anchorIdsInView = props.alignItemsAtEnd ? [...idsInView].reverse() : idsInView;
+   const now = Date.now();
+   const enableMVCPAnchorLock = (!!dataChanged || !!state.mvcpAnchorLock);
+   const scrollingTo = state.scrollingTo;
+@@ -1722,11 +1723,11 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+     } else if (scrollTarget !== void 0) {
+       targetId = (_c = scrollingTo == null ? void 0 : scrollingTo.key) != null ? _c : getId(state, scrollTarget);
+     } else if (idsInView.length > 0 && state.didContainersLayout && !dataChanged) {
+-      targetId = idsInView.find((id) => indexByKey.get(id) !== void 0);
++      targetId = anchorIdsInView.find((id) => indexByKey.get(id) !== void 0);
+     }
+     if (dataChanged && idsInView.length > 0 && state.didContainersLayout) {
+-      for (let i = 0; i < idsInView.length; i++) {
+-        const id = idsInView[i];
++      for (let i = 0; i < anchorIdsInView.length; i++) {
++        const id = anchorIdsInView[i];
+         const index = previousIndexByKey.get(id);
+         if (index !== void 0) {
+           const position = positions[index];
+diff --git a/node_modules/@legendapp/list/react.js b/node_modules/@legendapp/list/react.js
+index c102661..99cac83 100644
+--- a/node_modules/@legendapp/list/react.js
++++ b/node_modules/@legendapp/list/react.js
+@@ -1706,6 +1706,7 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+   const {
+     maintainVisibleContentPosition: { data: mvcpData, size: mvcpScroll, shouldRestorePosition }
+   } = props;
++  const anchorIdsInView = props.alignItemsAtEnd ? [...idsInView].reverse() : idsInView;
+   const now = Date.now();
+   const enableMVCPAnchorLock = (!!dataChanged || !!state.mvcpAnchorLock);
+   const scrollingTo = state.scrollingTo;
+@@ -1743,11 +1744,11 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+     } else if (scrollTarget !== void 0) {
+       targetId = (_c = scrollingTo == null ? void 0 : scrollingTo.key) != null ? _c : getId(state, scrollTarget);
+     } else if (idsInView.length > 0 && state.didContainersLayout && !dataChanged) {
+-      targetId = idsInView.find((id) => indexByKey.get(id) !== void 0);
++      targetId = anchorIdsInView.find((id) => indexByKey.get(id) !== void 0);
+     }
+     if (dataChanged && idsInView.length > 0 && state.didContainersLayout) {
+-      for (let i = 0; i < idsInView.length; i++) {
+-        const id = idsInView[i];
++      for (let i = 0; i < anchorIdsInView.length; i++) {
++        const id = anchorIdsInView[i];
+         const index = previousIndexByKey.get(id);
+         if (index !== void 0) {
+           const position = positions[index];
+diff --git a/node_modules/@legendapp/list/react.mjs b/node_modules/@legendapp/list/react.mjs
+index ff71fd6..a7a89dd 100644
+--- a/node_modules/@legendapp/list/react.mjs
++++ b/node_modules/@legendapp/list/react.mjs
+@@ -1685,6 +1685,7 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+   const {
+     maintainVisibleContentPosition: { data: mvcpData, size: mvcpScroll, shouldRestorePosition }
+   } = props;
++  const anchorIdsInView = props.alignItemsAtEnd ? [...idsInView].reverse() : idsInView;
+   const now = Date.now();
+   const enableMVCPAnchorLock = (!!dataChanged || !!state.mvcpAnchorLock);
+   const scrollingTo = state.scrollingTo;
+@@ -1722,11 +1723,11 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+     } else if (scrollTarget !== void 0) {
+       targetId = (_c = scrollingTo == null ? void 0 : scrollingTo.key) != null ? _c : getId(state, scrollTarget);
+     } else if (idsInView.length > 0 && state.didContainersLayout && !dataChanged) {
+-      targetId = idsInView.find((id) => indexByKey.get(id) !== void 0);
++      targetId = anchorIdsInView.find((id) => indexByKey.get(id) !== void 0);
+     }
+     if (dataChanged && idsInView.length > 0 && state.didContainersLayout) {
+-      for (let i = 0; i < idsInView.length; i++) {
+-        const id = idsInView[i];
++      for (let i = 0; i < anchorIdsInView.length; i++) {
++        const id = anchorIdsInView[i];
+         const index = previousIndexByKey.get(id);
+         if (index !== void 0) {
+           const position = positions[index];

patches/@legendapp/list/@legendapp+list+3.7.2+003+anchor-data-changes-after-scroll-jumps.patch

@@ -0,0 +1,56 @@
+diff --git a/node_modules/@legendapp/list/react-native.web.js b/node_modules/@legendapp/list/react-native.web.js
+index 99cac83..30d9757 100644
+--- a/node_modules/@legendapp/list/react-native.web.js
++++ b/node_modules/@legendapp/list/react-native.web.js
+@@ -7880,6 +7880,9 @@ function checkResetContainers(ctx, dataProp, { didColumnsChange = false } = {})
+     state.scrollForNextCalculateItemsInView = void 0;
+   }
+   state.positionsAreCurrent = false;
++  if (state.props.maintainVisibleContentPosition.data) {
++    state.userScrollAnchorReset = void 0;
++  }
+   calculateItemsInView(ctx, { dataChanged: true, doMVCP: true });
+   if ((_a3 = state.pendingEndMeasurements) == null ? void 0 : _a3.size) {
+     const removedMeasurements = new Set(state.pendingEndMeasurements);
+diff --git a/node_modules/@legendapp/list/react-native.web.mjs b/node_modules/@legendapp/list/react-native.web.mjs
+index a7a89dd..f55dea9 100644
+--- a/node_modules/@legendapp/list/react-native.web.mjs
++++ b/node_modules/@legendapp/list/react-native.web.mjs
+@@ -7859,6 +7859,9 @@ function checkResetContainers(ctx, dataProp, { didColumnsChange = false } = {})
+     state.scrollForNextCalculateItemsInView = void 0;
+   }
+   state.positionsAreCurrent = false;
++  if (state.props.maintainVisibleContentPosition.data) {
++    state.userScrollAnchorReset = void 0;
++  }
+   calculateItemsInView(ctx, { dataChanged: true, doMVCP: true });
+   if ((_a3 = state.pendingEndMeasurements) == null ? void 0 : _a3.size) {
+     const removedMeasurements = new Set(state.pendingEndMeasurements);
+diff --git a/node_modules/@legendapp/list/react.js b/node_modules/@legendapp/list/react.js
+index 99cac83..30d9757 100644
+--- a/node_modules/@legendapp/list/react.js
++++ b/node_modules/@legendapp/list/react.js
+@@ -7880,6 +7880,9 @@ function checkResetContainers(ctx, dataProp, { didColumnsChange = false } = {})
+     state.scrollForNextCalculateItemsInView = void 0;
+   }
+   state.positionsAreCurrent = false;
++  if (state.props.maintainVisibleContentPosition.data) {
++    state.userScrollAnchorReset = void 0;
++  }
+   calculateItemsInView(ctx, { dataChanged: true, doMVCP: true });
+   if ((_a3 = state.pendingEndMeasurements) == null ? void 0 : _a3.size) {
+     const removedMeasurements = new Set(state.pendingEndMeasurements);
+diff --git a/node_modules/@legendapp/list/react.mjs b/node_modules/@legendapp/list/react.mjs
+index a7a89dd..f55dea9 100644
+--- a/node_modules/@legendapp/list/react.mjs
++++ b/node_modules/@legendapp/list/react.mjs
+@@ -7859,6 +7859,9 @@ function checkResetContainers(ctx, dataProp, { didColumnsChange = false } = {})
+     state.scrollForNextCalculateItemsInView = void 0;
+   }
+   state.positionsAreCurrent = false;
++  if (state.props.maintainVisibleContentPosition.data) {
++    state.userScrollAnchorReset = void 0;
++  }
+   calculateItemsInView(ctx, { dataChanged: true, doMVCP: true });
+   if ((_a3 = state.pendingEndMeasurements) == null ? void 0 : _a3.size) {
+     const removedMeasurements = new Set(state.pendingEndMeasurements);