Merge pull request Expensify#65422 from bernhardoj/fix/64257-splitted-tx-doesnt-show-immediately

Fix splitted transactions don't show immediately

Author: neil-marcellini

src/hooks/useAnimatedHighlightStyle/index.ts

@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import {InteractionManager} from 'react-native';
 import {Easing, interpolate, interpolateColor, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming} from 'react-native-reanimated';
 import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
 import useTheme from '@hooks/useTheme';
@@ -95,27 +94,25 @@ export default function useAnimatedHighlightStyle({
             return;
         }
         setStartHighlight(false);
-        InteractionManager.runAfterInteractions(() => {
-            runOnJS(() => {
-                nonRepeatableProgress.set(
-                    withDelay(
-                        itemEnterDelay,
-                        withTiming(1, {duration: itemEnterDuration, easing: Easing.inOut(Easing.ease)}, (finished) => {
-                            if (!finished) {
-                                return;
-                            }
-
-                            repeatableProgress.set(
-                                withSequence(
-                                    withDelay(highlightStartDelay, withTiming(1, {duration: highlightStartDuration, easing: Easing.inOut(Easing.ease)})),
-                                    withDelay(highlightEndDelay, withTiming(0, {duration: highlightEndDuration, easing: Easing.inOut(Easing.ease)})),
-                                ),
-                            );
-                        }),
-                    ),
-                );
-            })();
-        });
+        runOnJS(() => {
+            nonRepeatableProgress.set(
+                withDelay(
+                    itemEnterDelay,
+                    withTiming(1, {duration: itemEnterDuration, easing: Easing.inOut(Easing.ease)}, (finished) => {
+                        if (!finished) {
+                            return;
+                        }
+
+                        repeatableProgress.set(
+                            withSequence(
+                                withDelay(highlightStartDelay, withTiming(1, {duration: highlightStartDuration, easing: Easing.inOut(Easing.ease)})),
+                                withDelay(highlightEndDelay, withTiming(0, {duration: highlightEndDuration, easing: Easing.inOut(Easing.ease)})),
+                            ),
+                        );
+                    }),
+                ),
+            );
+        })();
     }, [
         didScreenTransitionEnd,
         startHighlight,

src/libs/actions/IOU.ts

@@ -11923,8 +11923,9 @@ function saveSplitTransactions(draftTransaction: OnyxEntry<OnyxTypes.Transaction
         failureData.push(...(onyxData.failureData ?? []));
     });
 
+    // The new expenses are added to Onyx using the SET method. We use SET here as well to ensure the original transaction update isn't delayed.
     optimisticData.push({
-        onyxMethod: Onyx.METHOD.MERGE,
+        onyxMethod: Onyx.METHOD.SET,
         key: `${ONYXKEYS.COLLECTION.TRANSACTION}${originalTransactionID}`,
         value: {
             ...originalTransaction,