Use ActivityIndicator for embedded withFullTransactionOrNotFound loader

src/pages/iou/request/IOURequestStartPage.tsx

@@ -236,6 +236,7 @@ function IOURequestStartPage({
         manualContent = (
             <IOURequestStepAmountWithTransactionOnly
                 shouldKeepUserInput
+                shouldHideHeader
                 route={route}
                 navigation={navigation}
                 report={report}

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

@@ -1,7 +1,9 @@
+import ActivityIndicator from '@components/ActivityIndicator';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 
 import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
@@ -20,6 +22,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 
 import {useIsFocused} from '@react-navigation/native';
 import React from 'react';
+import {View} from 'react-native';
 
 type WithFullTransactionOrNotFoundOnyxProps = {
     /** Indicates whether the report data is loading */
@@ -73,14 +76,20 @@ type WithFullTransactionOrNotFoundProps<RouteName extends MoneyRequestRouteName>
 type WithFullTransactionOrNotFoundImplProps<TProps extends WithFullTransactionOrNotFoundProps<MoneyRequestRouteName>> = {
     WrappedComponent: ComponentType<TProps>;
     shouldShowLoadingIndicator: boolean;
+
+    /** When the wrapped step is embedded in a page that already renders navigation chrome (e.g. IOURequestStartPage), the parent's header stays visible, so the loading indicator must not trap the user. */
+    shouldHideHeader?: boolean;
 } & Omit<TProps, keyof WithFullTransactionOrNotFoundOnyxProps>;
 
 function WithFullTransactionOrNotFoundImpl<TProps extends WithFullTransactionOrNotFoundProps<MoneyRequestRouteName>>({
     WrappedComponent,
     shouldShowLoadingIndicator,
     ...props
 }: WithFullTransactionOrNotFoundImplProps<TProps>) {
+    const styles = useThemeStyles();
     const {route} = props;
+    // Read (but don't consume) shouldHideHeader so it is still forwarded to the wrapped component below.
+    const {shouldHideHeader} = props;
     const transactionID = route.params.transactionID;
     const userAction = 'action' in route.params && route.params.action ? route.params.action : CONST.IOU.ACTION.CREATE;
 
@@ -104,7 +113,13 @@ function WithFullTransactionOrNotFoundImpl<TProps extends WithFullTransactionOrN
     }
 
     if (isLoadingTransaction && shouldShowLoadingIndicator) {
-        return <FullScreenLoadingIndicator />;
+        return shouldHideHeader ? (
+            <View style={[styles.flex1, styles.fullScreenLoading]}>
+                <ActivityIndicator size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} />
+            </View>
+        ) : (
+            <FullScreenLoadingIndicator shouldUseGoBackButton />
+        );
     }
     return (
         <WrappedComponent
@@ -118,8 +133,8 @@ function WithFullTransactionOrNotFoundImpl<TProps extends WithFullTransactionOrN
 export default function <TProps extends WithFullTransactionOrNotFoundProps<MoneyRequestRouteName>>(
     WrappedComponent: ComponentType<TProps>,
     shouldShowLoadingIndicator = false,
-): React.ComponentType<Omit<TProps, keyof WithFullTransactionOrNotFoundOnyxProps>> {
-    function WithFullTransactionOrNotFound(props: Omit<TProps, keyof WithFullTransactionOrNotFoundOnyxProps>) {
+): React.ComponentType<Omit<TProps, keyof WithFullTransactionOrNotFoundOnyxProps> & {shouldHideHeader?: boolean}> {
+    function WithFullTransactionOrNotFound(props: Omit<TProps, keyof WithFullTransactionOrNotFoundOnyxProps> & {shouldHideHeader?: boolean}) {
         return (
             <WithFullTransactionOrNotFoundImpl
                 WrappedComponent={WrappedComponent}