fix(web): collapsing the working history at the bottom no longer doubles its rows (#31272)

Collapsing work history at the bottom let deferred list measurements fight scroll anchoring. Anchor only on opening and opt into immediate web shrink measurements while collapsing.

Author: flamboh

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -611,7 +611,7 @@ const ConversationTimeline = memo(function ConversationTimeline({
     const list = listRef.current;
     if (list) {
       list.cancelScroll();
-      list.anchorVisibleContent({ key: "working-indicator-row" });
+      if (workingHistoryKey !== key) list.anchorVisibleContent({ key: "working-indicator-row" });
     }
     setWorkingHistoryKey((current) => (current === key ? null : key));
   };
@@ -1702,6 +1702,7 @@ const ConversationTimeline = memo(function ConversationTimeline({
                   : maintainVisibleContentPosition
               }
               maintainScrollAtEndThreshold={1}
+              immediateWebShrinks={workingHistoryCollapsing}
               onScroll={handleScroll}
               onItemSizeChanged={scheduleMinimapRefresh}
               onMetricsChange={scheduleMinimapRefresh}

patches/@legendapp__list@3.7.2.patch

@@ -1,5 +1,17 @@
+diff --git a/react.d.ts b/react.d.ts
+index 358fcd7..e3c7de6 100644
+--- a/react.d.ts
++++ b/react.d.ts
+@@ -314,6 +314,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
+      * @default 0.1
+      */
+     maintainScrollAtEndThreshold?: number;
++    immediateWebShrinks?: boolean;
+     /**
+      * Maintains visibility of content.
+      * - size (default: true) stabilizes during size/layout changes while scrolling.
 diff --git a/react.js b/react.js
-index 5155454..2885128 100644
+index 5155454..b63bce6 100644
 --- a/react.js
 +++ b/react.js
 @@ -3489,6 +3489,12 @@ function abortBootstrapInitialScroll(ctx) {
@@ -42,7 +54,14 @@ index 5155454..2885128 100644
        const previousRect = prevRect != null ? prevRect : getContainerLayoutBaseline(element);
        const didSizeChange = previousRect === void 0 || rectObserved.width !== previousRect.width || rectObserved.height !== previousRect.height;
        prevRect = rectObserved;
-@@ -6296,7 +6302,7 @@ function processContainerLayout({ containerId, ctx, rectangle, ref, state }) {
+@@ -6290,13 +6296,13 @@ function processContainerLayout({ containerId, ctx, rectangle, ref, state }) {
+       size: layout
+     });
+   };
+-  const shouldDeferWebShrinkLayoutUpdate = !isInMVCPActiveMode(listState) && previousSize !== void 0 && size + 1 < previousSize;
++  const shouldDeferWebShrinkLayoutUpdate = !listState.props.immediateWebShrinks && !isInMVCPActiveMode(listState) && previousSize !== void 0 && size + 1 < previousSize;
+   if (shouldDeferWebShrinkLayoutUpdate) {
+     scheduleWebShrinkMeasurement(state, () => {
        var _a4;
        if (state.itemKey === currentItemKey) {
          const element = ref.current;
@@ -51,8 +70,24 @@ index 5155454..2885128 100644
          if (rect) {
            layout = { height: rect.height, width: rect.width };
          }
+@@ -9133,6 +9139,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
+     getFixedItemSize,
+     getItemType,
+     horizontal,
++    immediateWebShrinks,
+     rtl,
+     estimatedHeaderSize,
+     initialScrollAtEnd = false,
+@@ -9431,6 +9438,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
+     hasExternalScroll,
+     hideItemsUntilMeasured: experimental_hideItemsUntilMeasured,
+     horizontal: !!horizontal,
++    immediateWebShrinks: !!immediateWebShrinks,
+     itemsAreEqual,
+     keyExtractor: useWrapIfItem(keyExtractor),
+     maintainScrollAtEnd: maintainScrollAtEndConfig,
 diff --git a/react.mjs b/react.mjs
-index ce08abe..2c764cb 100644
+index ce08abe..294988d 100644
 --- a/react.mjs
 +++ b/react.mjs
 @@ -3468,6 +3468,12 @@ function abortBootstrapInitialScroll(ctx) {
@@ -95,7 +130,14 @@ index ce08abe..2c764cb 100644
        const previousRect = prevRect != null ? prevRect : getContainerLayoutBaseline(element);
        const didSizeChange = previousRect === void 0 || rectObserved.width !== previousRect.width || rectObserved.height !== previousRect.height;
        prevRect = rectObserved;
-@@ -6275,7 +6281,7 @@ function processContainerLayout({ containerId, ctx, rectangle, ref, state }) {
+@@ -6269,13 +6275,13 @@ function processContainerLayout({ containerId, ctx, rectangle, ref, state }) {
+       size: layout
+     });
+   };
+-  const shouldDeferWebShrinkLayoutUpdate = !isInMVCPActiveMode(listState) && previousSize !== void 0 && size + 1 < previousSize;
++  const shouldDeferWebShrinkLayoutUpdate = !listState.props.immediateWebShrinks && !isInMVCPActiveMode(listState) && previousSize !== void 0 && size + 1 < previousSize;
+   if (shouldDeferWebShrinkLayoutUpdate) {
+     scheduleWebShrinkMeasurement(state, () => {
        var _a4;
        if (state.itemKey === currentItemKey) {
          const element = ref.current;
@@ -104,6 +146,22 @@ index ce08abe..2c764cb 100644
          if (rect) {
            layout = { height: rect.height, width: rect.width };
          }
+@@ -9112,6 +9118,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
+     getFixedItemSize,
+     getItemType,
+     horizontal,
++    immediateWebShrinks,
+     rtl,
+     estimatedHeaderSize,
+     initialScrollAtEnd = false,
+@@ -9410,6 +9417,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
+     hasExternalScroll,
+     hideItemsUntilMeasured: experimental_hideItemsUntilMeasured,
+     horizontal: !!horizontal,
++    immediateWebShrinks: !!immediateWebShrinks,
+     itemsAreEqual,
+     keyExtractor: useWrapIfItem(keyExtractor),
+     maintainScrollAtEnd: maintainScrollAtEndConfig,
 diff --git a/react-native.js b/react-native.js
 index 4af685dfb961eb0c8a4bf1ae9132c9304cf4fa4d..df4ead7ae4f03cd0fbcd99a3df7d95e15b1852b1 100644
 --- a/react-native.js