diff --git a/src/pages/iou/request/IOURequestStartPage.tsx b/src/pages/iou/request/IOURequestStartPage.tsx index 4a2e3288b7a3..2e65055a4fb9 100644 --- a/src/pages/iou/request/IOURequestStartPage.tsx +++ b/src/pages/iou/request/IOURequestStartPage.tsx @@ -236,6 +236,7 @@ function IOURequestStartPage({ manualContent = ( type WithFullTransactionOrNotFoundImplProps> = { WrappedComponent: ComponentType; 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; function WithFullTransactionOrNotFoundImpl>({ @@ -80,7 +86,10 @@ function WithFullTransactionOrNotFoundImpl) { + 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; + return shouldHideHeader ? ( + + + + ) : ( + + ); } return ( >( WrappedComponent: ComponentType, shouldShowLoadingIndicator = false, -): React.ComponentType> { - function WithFullTransactionOrNotFound(props: Omit) { +): React.ComponentType & {shouldHideHeader?: boolean}> { + function WithFullTransactionOrNotFound(props: Omit & {shouldHideHeader?: boolean}) { return (