Display button spinner instead of full page loading when checking report data

Author: hoangzinh

src/pages/TransactionMerge/ConfirmationPage.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -19,7 +19,6 @@ import {buildMergedTransactionData, getSourceTransactionFromMergeTransaction, ge
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {MergeTransactionNavigatorParamList} from '@libs/Navigation/types';
-import {openReport} from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type {Transaction} from '@src/types/onyx';
@@ -47,20 +46,6 @@ function ConfirmationPage({route}: ConfirmationPageProps) {
     const targetTransactionThreadReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${targetTransactionThreadReportID}`];
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${targetTransactionThreadReport?.policyID}`, {canBeMissing: true});
 
-    // When user selects a card transaction to merge, that card transaction becomes the target transaction.
-    // The App may not have the transaction thread report loaded for card transactions, so we need to trigger
-    // OpenReport to ensure the transaction thread report is available.
-    useEffect(() => {
-        if (!targetTransactionThreadReportID && targetTransaction?.reportID) {
-            openReport(targetTransaction.reportID);
-            return;
-        }
-
-        if (targetTransactionThreadReportID && !targetTransactionThreadReport) {
-            openReport(targetTransactionThreadReportID);
-        }
-    }, [targetTransactionThreadReportID, targetTransaction, targetTransactionThreadReport]);
-
     // Build the merged transaction data for display
     const mergedTransactionData = useMemo(() => buildMergedTransactionData(targetTransaction, mergeTransaction), [targetTransaction, mergeTransaction]);
 

src/pages/TransactionMerge/DetailsReviewPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Button from '@components/Button';
@@ -20,13 +20,15 @@ import {
     getMergeFieldValue,
     getSourceTransactionFromMergeTransaction,
     getTargetTransactionFromMergeTransaction,
+    getTransactionThreadReportID,
     isEmptyMergeValue,
 } from '@libs/MergeTransactionUtils';
 import type {MergeFieldKey, MergeValue} from '@libs/MergeTransactionUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {MergeTransactionNavigatorParamList} from '@libs/Navigation/types';
 import {getCurrency} from '@libs/TransactionUtils';
+import {openReport} from '@userActions/Report';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -42,21 +44,22 @@ function DetailsReviewPage({route}: DetailsReviewPageProps) {
     const styles = useThemeStyles();
     const {transactionID, backTo} = route.params;
 
+    const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
     const [mergeTransaction, mergeTransactionMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.MERGE_TRANSACTION}${transactionID}`, {canBeMissing: false});
     const [targetTransaction = getTargetTransactionFromMergeTransaction(mergeTransaction)] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${mergeTransaction?.targetTransactionID}`, {
         canBeMissing: true,
     });
     const [sourceTransaction = getSourceTransactionFromMergeTransaction(mergeTransaction)] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${mergeTransaction?.sourceTransactionID}`, {
         canBeMissing: true,
     });
+    const targetTransactionThreadReportID = getTransactionThreadReportID(targetTransaction);
+    const targetTransactionThreadReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${targetTransactionThreadReportID}`];
 
-    // State for selected values and error
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [hasErrors, setHasErrors] = React.useState<Partial<Record<MergeFieldKey, boolean>>>({});
+    const [hasErrors, setHasErrors] = useState<Partial<Record<MergeFieldKey, boolean>>>({});
+    const [diffFields, setDiffFields] = useState<MergeFieldKey[]>([]);
+    const [isCheckingDataBeforeGoNext, setIsCheckingDataBeforeGoNext] = useState<boolean>(false);
 
-    const [diffFields, setDiffFields] = React.useState<MergeFieldKey[]>([]);
-
-    React.useEffect(() => {
+    useEffect(() => {
         if (!transactionID || !targetTransaction || !sourceTransaction) {
             return;
         }
@@ -67,6 +70,25 @@ function DetailsReviewPage({route}: DetailsReviewPageProps) {
         setDiffFields(conflictFields as MergeFieldKey[]);
     }, [targetTransaction, sourceTransaction, transactionID]);
 
+    useEffect(() => {
+        if (!isCheckingDataBeforeGoNext) {
+            return;
+        }
+
+        // When user selects a card transaction to merge, that card transaction becomes the target transaction.
+        // The App may not have the transaction thread report loaded for card transactions, so we need to trigger
+        // OpenReport to ensure the transaction thread report is available for confirmation page
+        if (!targetTransactionThreadReportID && targetTransaction?.reportID) {
+            return openReport(targetTransaction.reportID);
+        }
+        if (targetTransactionThreadReportID && !targetTransactionThreadReport) {
+            return openReport(targetTransactionThreadReportID);
+        }
+
+        Navigation.navigate(ROUTES.MERGE_TRANSACTION_CONFIRMATION_PAGE.getRoute(transactionID, Navigation.getActiveRoute()));
+        setIsCheckingDataBeforeGoNext(false);
+    }, [isCheckingDataBeforeGoNext, targetTransactionThreadReportID, targetTransaction?.reportID, targetTransactionThreadReport, transactionID]);
+
     // Handle selection
     const handleSelect = (field: MergeFieldKey, value: MergeValue) => {
         // Clear error if it has
@@ -98,7 +120,7 @@ function DetailsReviewPage({route}: DetailsReviewPageProps) {
         setHasErrors(newHasErrors);
 
         if (isEmptyObject(newHasErrors)) {
-            Navigation.navigate(ROUTES.MERGE_TRANSACTION_CONFIRMATION_PAGE.getRoute(transactionID, Navigation.getActiveRoute()));
+            setIsCheckingDataBeforeGoNext(true);
         }
     };
 
@@ -191,6 +213,7 @@ function DetailsReviewPage({route}: DetailsReviewPageProps) {
                         text={translate('common.continue')}
                         onPress={handleContinue}
                         isDisabled={!isEmptyObject(hasErrors)}
+                        isLoading={isCheckingDataBeforeGoNext}
                         pressOnEnter
                     />
                 </FixedFooter>