From d3f4c18332b0f3e2768a6508b4b5444c643806d5 Mon Sep 17 00:00:00 2001
From: Pavlo Tsimura <paultsimura@gmail.com>
Date: Mon, 11 Dec 2023 18:52:37 +0100
Subject: [PATCH 1/2] Handle brief NotFound page on the Request Money flow

---
 src/pages/iou/request/IOURequestStartPage.js               | 7 +++++++
 .../iou/request/step/withFullTransactionOrNotFound.js      | 7 +++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/request/IOURequestStartPage.js b/src/pages/iou/request/IOURequestStartPage.js
index 8c0f00af95e0..f7cdcd8785a7 100644
--- a/src/pages/iou/request/IOURequestStartPage.js
+++ b/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],
     );
 
+    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}
diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.js b/src/pages/iou/request/step/withFullTransactionOrNotFound.js
index f23bf6759513..2f705b75f07f 100644
--- a/src/pages/iou/request/step/withFullTransactionOrNotFound.js
+++ b/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,11 @@ 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.
         if (!transactionID) {
-            return <FullPageNotFoundView shouldShow />;
+            return <FullPageNotFoundView shouldShow={isFocused} />;
         }
 
         return (

From c78c451d487acd1a48c95f91c049d7afc7ad1ad6 Mon Sep 17 00:00:00 2001
From: Pavlo Tsimura <paultsimura@gmail.com>
Date: Mon, 11 Dec 2023 19:41:53 +0100
Subject: [PATCH 2/2] Add comment explaining isFocused usage

---
 src/pages/iou/request/step/withFullTransactionOrNotFound.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.js b/src/pages/iou/request/step/withFullTransactionOrNotFound.js
index 2f705b75f07f..1d5fdb3f6abd 100644
--- a/src/pages/iou/request/step/withFullTransactionOrNotFound.js
+++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.js
@@ -35,6 +35,8 @@ export default function (WrappedComponent) {
         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={isFocused} />;
         }