Add shouldMaintainVisibleContentPosition logic

Author: VickyStash

src/components/FlashList/InvertedFlashList/index.tsx

@@ -17,14 +17,18 @@ type InvertedFlashListProps<T> = FlashListProps<T> & {
 
     /** Ref to the underlying list instance. */
     ref: FlatListRefType;
+
+    /** Whether the list should handle `maintainVisibleContentPosition` */
+    shouldMaintainVisibleContentPosition?: boolean;
 };
 
-function InvertedFlashList<T>({data, keyExtractor, initialScrollKey, onStartReached: onStartReachedProp, ...restProps}: InvertedFlashListProps<T>) {
+function InvertedFlashList<T>({data, keyExtractor, initialScrollKey, onStartReached: onStartReachedProp, shouldMaintainVisibleContentPosition, ...restProps}: InvertedFlashListProps<T>) {
     const {displayedData, onStartReached, maintainVisibleContentPosition} = useFlashListScrollKey<T>({
         data,
         keyExtractor,
         initialScrollKey,
         onStartReached: onStartReachedProp,
+        shouldMaintainVisibleContentPosition,
     });
 
     return (

src/components/FlashList/useFlashListScrollKey.ts

@@ -1,6 +1,9 @@
 import type {FlashListProps} from '@shopify/flash-list';
 import {useEffect, useState} from 'react';
 
+// How long to keep MVCP enabled after `shouldMaintainVisibleContentPosition` drops back to false
+const MVCP_FALLOFF_MS = 500;
+
 type FlashListScrollKeyProps<T> = {
     /** The array of items to render in the list. */
     data: T[];
@@ -13,9 +16,12 @@ type FlashListScrollKeyProps<T> = {
 
     /** Callback invoked when the user scrolls close to the start of the list. */
     onStartReached: FlashListProps<T>['onStartReached'];
+
+    /** Whether the list should handle `maintainVisibleContentPosition` */
+    shouldMaintainVisibleContentPosition?: boolean;
 };
 
-export default function useFlashListScrollKey<T>({data, keyExtractor, initialScrollKey, onStartReached}: FlashListScrollKeyProps<T>) {
+export default function useFlashListScrollKey<T>({data, keyExtractor, initialScrollKey, onStartReached, shouldMaintainVisibleContentPosition}: FlashListScrollKeyProps<T>) {
     const [isInitialRender, setIsInitialRender] = useState(true);
     const [hasLinkingSettled, setHasLinkingSettled] = useState(!initialScrollKey);
 
@@ -33,9 +39,20 @@ export default function useFlashListScrollKey<T>({data, keyExtractor, initialScr
         });
     }, [isInitialRender, initialScrollKey]);
 
-    // `undefined` = leave FlashList's default (MVCP enabled) while we're still pinning the linked item.
-    // `{disabled: true}` once that's done so MVCP can't interfere afterward.
-    const maintainVisibleContentPosition: FlashListProps<T>['maintainVisibleContentPosition'] = hasLinkingSettled ? {disabled: true} : undefined;
+    // FlashList captures MVCP anchors on the render BEFORE a data change. Keep MVCP on at mount
+    // (warmup) and while the caller raises the prop, then disable after a short falloff.
+    const [isKeepingMVCPOn, setIsKeepingMVCPOn] = useState(true);
+    useEffect(() => {
+        if (shouldMaintainVisibleContentPosition) {
+            setIsKeepingMVCPOn(true);
+            return;
+        }
+        const timeoutID = setTimeout(() => setIsKeepingMVCPOn(false), MVCP_FALLOFF_MS);
+        return () => clearTimeout(timeoutID);
+    }, [shouldMaintainVisibleContentPosition]);
+
+    const shouldEnableMVCP = !!shouldMaintainVisibleContentPosition || isKeepingMVCPOn || !hasLinkingSettled;
+    const maintainVisibleContentPosition: FlashListProps<T>['maintainVisibleContentPosition'] = {disabled: !shouldEnableMVCP};
 
     if (!isInitialRender || !initialScrollKey) {
         return {displayedData: data, onStartReached, maintainVisibleContentPosition};

src/pages/inbox/report/ReportActionsList.tsx

@@ -233,6 +233,9 @@ function ReportActionsList({
     const hasHeaderRendered = useRef(false);
 
     const lastAction = sortedVisibleReportActions.at(0);
+    const isLastActionFromCurrentUser = (isReportPreviewAction(lastAction) ? lastAction?.childLastActorAccountID : lastAction?.actorAccountID) === currentUserAccountID;
+    const prevLastActionID = usePrevious(lastAction?.reportActionID);
+    const shouldMaintainVisibleContentPosition = prevLastActionID !== undefined && prevLastActionID !== lastAction?.reportActionID && !isLastActionFromCurrentUser;
     const sortedVisibleReportActionsObjects: OnyxTypes.ReportActions = useMemo(
         () =>
             sortedVisibleReportActions.reduce((actions, action) => {
@@ -900,6 +903,7 @@ function ReportActionsList({
                     extraData={extraData}
                     key={listID}
                     getItemType={(item) => item.actionName}
+                    shouldMaintainVisibleContentPosition={shouldMaintainVisibleContentPosition}
                     initialScrollKey={linkedReportActionID}
                     onContentSizeChange={() => {
                         trackVerticalScrolling(undefined);