[No QA] Show a spinner below the DynamicForm header and drop redundant shouldUseGoBackButton props

src/components/DynamicForm/index.tsx

@@ -1,8 +1,9 @@
-import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import ActivityIndicator from '@components/ActivityIndicator';
 
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useSubPage from '@hooks/useSubPage';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 import Navigation from '@libs/Navigation/Navigation';
 import {findLastPageIndex} from '@libs/SubPageUtils';
@@ -16,6 +17,7 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 import {Str} from 'expensify-common';
 import React, {useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
 
 import type {DynamicFormFlowProps, DynamicFormSubPageProps, DynamicFormValues} from './types';
 
@@ -60,6 +62,7 @@ function DynamicFormFlow({
     layout = 'auto',
     hasConfirmation = true,
 }: DynamicFormFlowProps) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [draft, draftMetadata] = useOnyx(`${formID}Draft`);
     const [sensitiveAnswersByForm] = useOnyx(ONYXKEYS.RAM_ONLY_DYNAMIC_FORM_SENSITIVE_ANSWERS);
@@ -312,7 +315,9 @@ function DynamicFormFlow({
             shouldShowStepIndicator={isStepIndicatorAsked && stepNames.length > 1}
         >
             {isDraftLoading || isRedirecting || isOnUnavailablePage || (!hasPageToShow && pages.length > 0) ? (
-                <FullscreenLoadingIndicator />
+                <View style={[styles.flex1, styles.fullScreenLoading]}>
+                    <ActivityIndicator size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} />
+                </View>
             ) : (
                 <CurrentPage
                     isEditing={isEditing}

src/components/ReportOrNotFoundGuard.tsx

@@ -126,7 +126,7 @@ function ReportOrNotFoundGuard({reportID, shouldRequireReportID = true, children
     }
 
     if (decision === 'loading') {
-        return <FullscreenLoadingIndicator shouldUseGoBackButton />;
+        return <FullscreenLoadingIndicator />;
     }
 
     if (decision === 'notFound') {

src/pages/workspace/connections/ConnectionsMergePageBase.tsx

@@ -152,10 +152,7 @@ function ConnectionsMergePageBase({policyID, category, cards, shouldBeBlocked}:
             fullPageNotFoundViewProps={{onBackButtonPress: () => Navigation.goBack(ROUTES.WORKSPACE_CONNECTIONS.getRoute(policyID))}}
         >
             {isFetchingConnections ? (
-                <FullScreenLoadingIndicator
-                    shouldUseGoBackButton
-                    style={styles.flex1}
-                />
+                <FullScreenLoadingIndicator style={styles.flex1} />
             ) : (
                 <ConnectionsMergePageBaseContent
                     policyID={policyID}

src/pages/workspace/connections/ConnectionsReceiptPartnersPage.tsx

@@ -74,10 +74,7 @@ function ConnectionsReceiptPartnersPage({route}: ConnectionsReceiptPartnersPageP
             fullPageNotFoundViewProps={{onBackButtonPress: () => Navigation.goBack(ROUTES.WORKSPACE_CONNECTIONS.getRoute(policyID))}}
         >
             {isLoading ? (
-                <FullScreenLoadingIndicator
-                    shouldUseGoBackButton
-                    style={styles.flex1}
-                />
+                <FullScreenLoadingIndicator style={styles.flex1} />
             ) : (
                 <ScreenWrapper
                     testID="ConnectionsReceiptPartnersPage"

tests/unit/components/DynamicForm/DynamicFormFlowTest.tsx

@@ -1,9 +1,12 @@
 import {render} from '@testing-library/react-native';
 
+import ActivityIndicator from '@components/ActivityIndicator';
 import DynamicFormFlow from '@components/DynamicForm';
 import type {DynamicFormLayout, DynamicFormSubPageProps} from '@components/DynamicForm/types';
 import {getListItems, getListItemSensitiveKey} from '@components/DynamicForm/utils/listItems';
 import type {FormValue} from '@components/Form/types';
+import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import HeaderWithBackButtonAndTitle from '@components/Header/composed/HeaderWithBackButtonAndTitle';
 
 import useSubPage from '@hooks/useSubPage';
 import type {SubPageProps} from '@hooks/useSubPage/types';
@@ -44,6 +47,7 @@ jest.mock('@userActions/DynamicForm', () => ({
 }));
 jest.mock('@libs/Navigation/Navigation', () => ({navigate: jest.fn(), goBack: jest.fn()}));
 jest.mock('@components/ScreenWrapper', () => jest.fn(({children}: {children: React.ReactNode}) => children));
+jest.mock('@components/ActivityIndicator', () => jest.fn(() => null));
 jest.mock('@components/FullscreenLoadingIndicator', () => jest.fn(() => null));
 jest.mock('@components/InteractiveStepWrapper', () => jest.fn((props: {stepNames: string[]; startStepIndex: number}) => mockStepWrapper(props)));
 jest.mock('@components/Header/composed/HeaderWithBackButtonAndTitle', () =>
@@ -429,6 +433,18 @@ describe('DynamicFormFlow', () => {
         expect(subPageOptions.skipPages).toEqual([]);
     });
 
+    it('shows a spinner below the header while it loads, so no second Go Back button covers the header', async () => {
+        // Given a flow that is redirecting to another page
+        // When the flow renders
+        await renderFlow({isRedirecting: true});
+
+        // Then the header is drawn with a plain spinner under it instead of a page
+        expect(HeaderWithBackButtonAndTitle).toHaveBeenCalled();
+        expect(ActivityIndicator).toHaveBeenCalled();
+        expect(FullscreenLoadingIndicator).not.toHaveBeenCalled();
+        expect(mockCurrentPage).not.toHaveBeenCalled();
+    });
+
     it('sends the user back to the incomplete page without pushing a second copy of it', async () => {
         // Given a form whose SSN was lost when the app restarted
         const {subPageOptions, onSubmit} = await renderFlow({draft: {firstName: 'Jane', legalType: 'PRIVATE'}});