From f796b97cb45382f2ff7cad71f85d6aeeb2a90832 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Mon, 18 Nov 2024 17:52:40 +0700
Subject: [PATCH] fix: Tags - State field is not auto selected

---
 .../iou/request/step/IOURequestStepConfirmation.tsx    |  5 +++++
 .../iou/request/step/withFullTransactionOrNotFound.tsx | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx
index 06e4ed83d936..c32b8e2b5f59 100644
--- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx
+++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx
@@ -51,6 +51,7 @@ function IOURequestStepConfirmation({
         params: {iouType, reportID, transactionID, action, participantsAutoAssigned: participantsAutoAssignedFromRoute},
     },
     transaction,
+    isLoadingTransaction,
 }: IOURequestStepConfirmationProps) {
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
@@ -603,6 +604,10 @@ function IOURequestStepConfirmation({
         createTransaction(listOfParticipants);
     };
 
+    if (isLoadingTransaction) {
+        return <FullScreenLoadingIndicator />;
+    }
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx
index 8b4519d2758d..218a148fdbf0 100644
--- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx
+++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx
@@ -12,10 +12,14 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type {Transaction} from '@src/types/onyx';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 type WithFullTransactionOrNotFoundOnyxProps = {
     /** Indicates whether the report data is loading */
     transaction: OnyxEntry<Transaction>;
+
+    /** Indicates whether the transaction data is loading */
+    isLoadingTransaction?: boolean;
 };
 
 type MoneyRequestRouteName =
@@ -54,8 +58,9 @@ export default function <TProps extends WithFullTransactionOrNotFoundProps<Money
         const userAction = 'action' in route.params && route.params.action ? route.params.action : CONST.IOU.ACTION.CREATE;
 
         const shouldUseTransactionDraft = IOUUtils.shouldUseTransactionDraft(userAction);
-        const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
-        const [transactionDraft] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`);
+        const [transaction, transactionResult] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+        const [transactionDraft, transactionDraftResult] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`);
+        const isLoadingTransaction = isLoadingOnyxValue(transactionResult, transactionDraftResult);
 
         const isFocused = useIsFocused();
 
@@ -70,6 +75,7 @@ export default function <TProps extends WithFullTransactionOrNotFoundProps<Money
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...(props as TProps)}
                 transaction={shouldUseTransactionDraft ? transactionDraft : transaction}
+                isLoadingTransaction={isLoadingTransaction}
                 ref={ref}
             />
         );