Merge pull request #32849 from paultsimura/fix/32807-request-money-no…

…t-found

fix: Handle brief NotFound page on the Request Money flow

src/pages/iou/request/IOURequestStartPage.js

@@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
@@ -108,6 +109,12 @@ function IOURequestStartPage({
         [previousIOURequestType, reportID, isFromGlobalCreate],
     );
 
+    if (!transaction.transactionID) {
+        // The draft transaction is initialized only after the component is mounted,
+        // which will lead to briefly displaying the Not Found page without this loader.
+        return <FullScreenLoadingIndicator />;
+    }
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}

src/pages/iou/request/step/withFullTransactionOrNotFound.js

@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -31,9 +32,13 @@ export default function (WrappedComponent) {
             transaction: {transactionID},
         } = props;
 
-        // If the transaction does not have a transactionID, then the transaction no longer exists in Onyx as a full transaction and the not-found page should be shown
+        const isFocused = useIsFocused();
+
+        // If the transaction does not have a transactionID, then the transaction no longer exists in Onyx as a full transaction and the not-found page should be shown.
+        // In addition, the not-found page should be shown only if the component screen's route is active (i.e. is focused).
+        // This is to prevent it from showing when the modal is being dismissed while navigating to a different route (e.g. on requesting money).
         if (!transactionID) {
-            return <FullPageNotFoundView shouldShow />;
+            return <FullPageNotFoundView shouldShow={isFocused} />;
         }
 
         return (