diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 2d04410ee852..907c97b1e520 100755
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -234,8 +234,12 @@ const CONST = {
     // Multiplier for gyroscope animation in order to make it a bit more subtle
     ANIMATION_GYROSCOPE_VALUE: 0.4,
     ANIMATION_PAID_DURATION: 200,
+    ANIMATION_SUBMIT_DURATION: 200,
+    ANIMATION_SUBMIT_LOADING_STATE_DURATION: 1000,
+    ANIMATION_SUBMIT_SUBMITTED_STATE_VISIBLE_DURATION: 1500,
     ANIMATION_PAID_CHECKMARK_DELAY: 300,
     ANIMATION_THUMBS_UP_DURATION: 250,
+    ANIMATION_SUBMITTED_DURATION: 250,
     ANIMATION_THUMBS_UP_DELAY: 200,
     ANIMATION_PAID_BUTTON_HIDE_DELAY: 300,
     BACKGROUND_IMAGE_TRANSITION_DURATION: 1000,
diff --git a/src/components/AnimatedSubmitButton/index.tsx b/src/components/AnimatedSubmitButton/index.tsx
new file mode 100644
index 000000000000..aabe97dca511
--- /dev/null
+++ b/src/components/AnimatedSubmitButton/index.tsx
@@ -0,0 +1,139 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import Animated, {Keyframe, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+
+type AnimatedSubmitButtonProps = {
+    // Whether to show the success state
+    success: boolean | undefined;
+
+    // Text to show on the button
+    text: string;
+
+    // Function to call when the button is pressed
+    onPress: () => void;
+
+    // Whether the animation is running
+    isSubmittingAnimationRunning: boolean;
+
+    // Function to call when the animation finishes
+    onAnimationFinish: () => void;
+};
+
+function AnimatedSubmitButton({success, text, onPress, isSubmittingAnimationRunning, onAnimationFinish}: AnimatedSubmitButtonProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const isAnimationRunning = isSubmittingAnimationRunning;
+    const buttonDuration = isSubmittingAnimationRunning ? CONST.ANIMATION_SUBMIT_DURATION : CONST.ANIMATION_SUBMITTED_DURATION;
+    const gap = styles.expenseAndReportPreviewTextButtonContainer.gap;
+    const buttonMarginTop = useSharedValue<number>(gap);
+    const height = useSharedValue<number>(variables.componentSizeNormal);
+    const [canShow, setCanShow] = useState(true);
+    const [minWidth, setMinWidth] = useState<number>(0);
+    const [isShowingLoading, setIsShowingLoading] = useState(false);
+    const viewRef = useRef<HTMLElement | null>(null);
+
+    const containerStyles = useAnimatedStyle(() => ({
+        height: height.get(),
+        justifyContent: 'center',
+    }));
+
+    const stretchOutY = useCallback(() => {
+        'worklet';
+
+        if (canShow) {
+            runOnJS(onAnimationFinish)();
+            return;
+        }
+        height.set(withTiming(0, {duration: buttonDuration}, () => runOnJS(onAnimationFinish)()));
+    }, [buttonDuration, height, onAnimationFinish, canShow]);
+
+    const buttonAnimation = useMemo(
+        () =>
+            new Keyframe({
+                from: {
+                    opacity: 1,
+                    transform: [{scale: 1}],
+                },
+                to: {
+                    opacity: 0,
+                    transform: [{scale: 0}],
+                },
+            })
+                .duration(buttonDuration)
+                .withCallback(stretchOutY),
+        [buttonDuration, stretchOutY],
+    );
+    const icon = isAnimationRunning ? Expensicons.Send : null;
+
+    useEffect(() => {
+        if (!isAnimationRunning) {
+            setMinWidth(0);
+            setCanShow(true);
+            setIsShowingLoading(false);
+            height.set(variables.componentSizeNormal);
+            buttonMarginTop.set(0);
+            return;
+        }
+
+        setMinWidth(viewRef.current?.getBoundingClientRect?.().width ?? 0);
+        setIsShowingLoading(true);
+
+        const timer = setTimeout(() => {
+            setIsShowingLoading(false);
+        }, CONST.ANIMATION_SUBMIT_LOADING_STATE_DURATION);
+
+        return () => clearTimeout(timer);
+    }, [buttonMarginTop, gap, height, isAnimationRunning]);
+
+    useEffect(() => {
+        if (!isAnimationRunning || isShowingLoading) {
+            return;
+        }
+
+        const timer = setTimeout(() => setCanShow(false), CONST.ANIMATION_SUBMIT_SUBMITTED_STATE_VISIBLE_DURATION);
+
+        return () => clearTimeout(timer);
+    }, [isAnimationRunning, isShowingLoading]);
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    const showLoading = isShowingLoading || (!viewRef.current && isAnimationRunning);
+
+    return (
+        <Animated.View style={[containerStyles, {minWidth}]}>
+            {isAnimationRunning && canShow && (
+                <Animated.View
+                    ref={(el) => {
+                        viewRef.current = el as HTMLElement | null;
+                    }}
+                    exiting={buttonAnimation}
+                >
+                    <Button
+                        success={success}
+                        text={showLoading ? text : translate('common.submitted')}
+                        isLoading={showLoading}
+                        icon={!showLoading ? icon : undefined}
+                        isDisabled
+                        shouldStayNormalOnDisable
+                    />
+                </Animated.View>
+            )}
+            {!isAnimationRunning && (
+                <Button
+                    success={success}
+                    text={text}
+                    onPress={onPress}
+                    icon={icon}
+                />
+            )}
+        </Animated.View>
+    );
+}
+
+AnimatedSubmitButton.displayName = 'AnimatedSubmitButton';
+
+export default AnimatedSubmitButton;
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 3677f5ca566a..a0104a6e098d 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -167,6 +167,11 @@ type ButtonProps = Partial<ChildrenProps> & {
      * Reference to the outer element.
      */
     ref?: ForwardedRef<View>;
+
+    /**
+     * Whether the button should stay visually normal even when disabled.
+     */
+    shouldStayNormalOnDisable?: boolean;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority' | 'isPressOnEnterActive'>;
@@ -271,6 +276,7 @@ function Button({
     isNested = false,
     secondLineText = '',
     shouldBlendOpacity = false,
+    shouldStayNormalOnDisable = false,
     ref,
     ...rest
 }: ButtonProps) {
@@ -389,8 +395,8 @@ function Button({
             StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, !!icon, !!(text?.length > 0), shouldShowRightIcon),
             success ? styles.buttonSuccess : undefined,
             danger ? styles.buttonDanger : undefined,
-            isDisabled ? styles.buttonOpacityDisabled : undefined,
-            isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
+            isDisabled && !shouldStayNormalOnDisable ? styles.buttonOpacityDisabled : undefined,
+            isDisabled && !danger && !success && !shouldStayNormalOnDisable ? styles.buttonDisabled : undefined,
             shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
             shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
             text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
@@ -413,6 +419,7 @@ function Button({
             styles,
             success,
             text,
+            shouldStayNormalOnDisable,
         ],
     );
 
@@ -483,7 +490,7 @@ function Button({
                 shouldBlendOpacity={shouldBlendOpacity}
                 disabled={isLoading || isDisabled}
                 wrapperStyle={[
-                    isDisabled ? {...styles.cursorDisabled, ...styles.noSelect} : {},
+                    isDisabled && !shouldStayNormalOnDisable ? {...styles.cursorDisabled, ...styles.noSelect} : {},
                     styles.buttonContainer,
                     shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
@@ -491,20 +498,24 @@ function Button({
                 ]}
                 style={buttonContainerStyles}
                 isNested={isNested}
-                hoverStyle={[
-                    shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
-                    success && !isDisabled ? styles.buttonSuccessHovered : undefined,
-                    danger && !isDisabled ? styles.buttonDangerHovered : undefined,
-                    hoverStyles,
-                ]}
-                disabledStyle={disabledStyle}
+                hoverStyle={
+                    !isDisabled || !shouldStayNormalOnDisable
+                        ? [
+                              shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
+                              success && !isDisabled ? styles.buttonSuccessHovered : undefined,
+                              danger && !isDisabled ? styles.buttonDangerHovered : undefined,
+                              hoverStyles,
+                          ]
+                        : []
+                }
+                disabledStyle={!shouldStayNormalOnDisable ? disabledStyle : undefined}
                 id={id}
                 testID={testID}
                 accessibilityLabel={accessibilityLabel}
                 role={getButtonRole(isNested)}
                 hoverDimmingValue={1}
-                onHoverIn={() => setIsHovered(true)}
-                onHoverOut={() => setIsHovered(false)}
+                onHoverIn={!isDisabled || !shouldStayNormalOnDisable ? () => setIsHovered(true) : undefined}
+                onHoverOut={!isDisabled || !shouldStayNormalOnDisable ? () => setIsHovered(false) : undefined}
             >
                 {shouldBlendOpacity && <View style={[StyleSheet.absoluteFill, buttonBlendForegroundStyle]} />}
                 {renderContent()}
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 44a7201e5d95..8a87641d45dc 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -108,6 +108,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type IconAsset from '@src/types/utils/IconAsset';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import AnimatedSubmitButton from './AnimatedSubmitButton';
 import BrokenConnectionDescription from './BrokenConnectionDescription';
 import Button from './Button';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
@@ -262,7 +263,8 @@ function MoneyReportHeader({
 
     const [exportModalStatus, setExportModalStatus] = useState<ExportType | null>(null);
 
-    const {isPaidAnimationRunning, isApprovedAnimationRunning, startAnimation, stopAnimation, startApprovedAnimation} = usePaymentAnimations();
+    const {isPaidAnimationRunning, isApprovedAnimationRunning, isSubmittingAnimationRunning, startAnimation, stopAnimation, startApprovedAnimation, startSubmittingAnimation} =
+        usePaymentAnimations();
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -555,13 +557,6 @@ function MoneyReportHeader({
     }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]);
 
     const primaryAction = useMemo(() => {
-        // It's necessary to allow payment animation to finish before button is changed
-        if (isPaidAnimationRunning || isApprovedAnimationRunning) {
-            return CONST.REPORT.PRIMARY_ACTIONS.PAY;
-        }
-        if (!moneyRequestReport) {
-            return '';
-        }
         return getReportPrimaryAction({
             report: moneyRequestReport,
             chatReport,
@@ -572,18 +567,20 @@ function MoneyReportHeader({
             reportActions,
             isChatReportArchived,
             invoiceReceiverPolicy,
+            isPaidAnimationRunning,
+            isSubmittingAnimationRunning,
         });
     }, [
         isPaidAnimationRunning,
-        isApprovedAnimationRunning,
+        isSubmittingAnimationRunning,
         moneyRequestReport,
-        reportNameValuePairs,
-        policy,
+        chatReport,
         transactions,
         violations,
+        policy,
+        reportNameValuePairs,
         reportActions,
         isChatReportArchived,
-        chatReport,
         invoiceReceiverPolicy,
     ]);
 
@@ -758,13 +755,14 @@ function MoneyReportHeader({
 
     const primaryActionsImplementation = {
         [CONST.REPORT.PRIMARY_ACTIONS.SUBMIT]: (
-            <Button
+            <AnimatedSubmitButton
                 success
                 text={translate('common.submit')}
                 onPress={() => {
                     if (!moneyRequestReport) {
                         return;
                     }
+                    startSubmittingAnimation();
                     submitReport(moneyRequestReport);
                     if (currentSearchQueryJSON) {
                         search({
@@ -775,6 +773,8 @@ function MoneyReportHeader({
                         });
                     }
                 }}
+                isSubmittingAnimationRunning={isSubmittingAnimationRunning}
+                onAnimationFinish={stopAnimation}
             />
         ),
         [CONST.REPORT.PRIMARY_ACTIONS.APPROVE]: (
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index be793ca940c6..14cc6ccb06bb 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -2,6 +2,7 @@ import React, {useCallback, useContext, useDeferredValue, useEffect, useMemo, us
 import {ActivityIndicator, FlatList, View} from 'react-native';
 import type {ListRenderItemInfo, ViewToken} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated';
+import AnimatedSubmitButton from '@components/AnimatedSubmitButton';
 import Button from '@components/Button';
 import {getButtonRole} from '@components/Button/utils';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -138,7 +139,8 @@ function MoneyRequestReportPreviewContent({
         [transactions, iouReportID, action],
     );
 
-    const {isPaidAnimationRunning, isApprovedAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation} = usePaymentAnimations();
+    const {isPaidAnimationRunning, isApprovedAnimationRunning, isSubmittingAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation, startSubmittingAnimation} =
+        usePaymentAnimations();
     const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
     const [requestType, setRequestType] = useState<ActionHandledType>();
     const [paymentType, setPaymentType] = useState<PaymentMethodType>();
@@ -312,7 +314,7 @@ function MoneyRequestReportPreviewContent({
     const totalAmountStyle = shouldUseNarrowLayout ? [styles.flexColumnReverse, styles.alignItemsStretch] : [styles.flexRow, styles.alignItemsCenter];
 
     useEffect(() => {
-        if (!isPaidAnimationRunning || isApprovedAnimationRunning) {
+        if (!isPaidAnimationRunning || isApprovedAnimationRunning || isSubmittingAnimationRunning) {
             return;
         }
 
@@ -454,12 +456,17 @@ function MoneyRequestReportPreviewContent({
     }, [iouReportID]);
 
     const reportPreviewAction = useMemo(() => {
-        // It's necessary to allow payment animation to finish before button is changed
-        if (isPaidAnimationRunning || isApprovedAnimationRunning) {
-            return CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY;
-        }
-        return getReportPreviewAction(violations, isIouReportArchived || isChatReportArchived, iouReport, policy, transactions, invoiceReceiverPolicy);
-    }, [isPaidAnimationRunning, isApprovedAnimationRunning, violations, isIouReportArchived, isChatReportArchived, iouReport, policy, transactions, invoiceReceiverPolicy]);
+        return getReportPreviewAction(
+            violations,
+            isIouReportArchived || isChatReportArchived,
+            iouReport,
+            policy,
+            transactions,
+            invoiceReceiverPolicy,
+            isPaidAnimationRunning,
+            isSubmittingAnimationRunning,
+        );
+    }, [isPaidAnimationRunning, isSubmittingAnimationRunning, violations, iouReport, policy, transactions, isIouReportArchived, invoiceReceiverPolicy, isChatReportArchived]);
 
     const addExpenseDropdownOptions = useMemo(
         () => [
@@ -499,10 +506,15 @@ function MoneyRequestReportPreviewContent({
 
     const reportPreviewActions = {
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: (
-            <Button
+            <AnimatedSubmitButton
                 success={isWaitingForSubmissionFromCurrentUser}
-                text={translate('common.submit')}
-                onPress={() => submitReport(iouReport)}
+                text={translate('iou.submitAmount', {amount: getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction)})}
+                onPress={() => {
+                    startSubmittingAnimation();
+                    submitReport(iouReport);
+                }}
+                isSubmittingAnimationRunning={isSubmittingAnimationRunning}
+                onAnimationFinish={stopAnimation}
             />
         ),
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: (
diff --git a/src/hooks/usePaymentAnimations.ts b/src/hooks/usePaymentAnimations.ts
index 47f51d9cafa5..cc46835abd08 100644
--- a/src/hooks/usePaymentAnimations.ts
+++ b/src/hooks/usePaymentAnimations.ts
@@ -4,10 +4,12 @@ import HapticFeedback from '@libs/HapticFeedback';
 function usePaymentAnimations() {
     const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false);
     const [isApprovedAnimationRunning, setIsApprovedAnimationRunning] = useState(false);
+    const [isSubmittingAnimationRunning, setIsSubmittingAnimationRunning] = useState(false);
 
     const stopAnimation = useCallback(() => {
         setIsPaidAnimationRunning(false);
         setIsApprovedAnimationRunning(false);
+        setIsSubmittingAnimationRunning(false);
     }, []);
 
     const startAnimation = useCallback(() => {
@@ -20,12 +22,19 @@ function usePaymentAnimations() {
         HapticFeedback.longPress();
     }, []);
 
+    const startSubmittingAnimation = useCallback(() => {
+        setIsSubmittingAnimationRunning(true);
+        HapticFeedback.longPress();
+    }, []);
+
     return {
         isPaidAnimationRunning,
         isApprovedAnimationRunning,
+        isSubmittingAnimationRunning,
         stopAnimation,
         startAnimation,
         startApprovedAnimation,
+        startSubmittingAnimation,
     };
 }
 
diff --git a/src/languages/de.ts b/src/languages/de.ts
index 1607bc738b85..0afe21b7c96a 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: 'Mehrere auswählen',
         saveChanges: 'Änderungen speichern',
         submit: 'Einreichen',
+        submitted: 'Eingereicht',
         rotate: 'Drehen',
         zoom: 'Zoom',
         password: 'Passwort',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index e5bf86dfdf3b..2dc96e25cd78 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -349,6 +349,7 @@ const translations = {
         selectMultiple: 'Select multiple',
         saveChanges: 'Save changes',
         submit: 'Submit',
+        submitted: 'Submitted',
         rotate: 'Rotate',
         zoom: 'Zoom',
         password: 'Password',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index eaab1de54c74..bb702bf64145 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -339,6 +339,7 @@ const translations = {
         save: 'Guardar',
         saveChanges: 'Guardar cambios',
         submit: 'Enviar',
+        submitted: 'Enviado',
         rotate: 'Rotar',
         zoom: 'Zoom',
         password: 'Contraseña',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 1865eb337e8b..e2cc07c95e31 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: 'Sélectionner plusieurs',
         saveChanges: 'Enregistrer les modifications',
         submit: 'Soumettre',
+        submitted: 'Soumis',
         rotate: 'Pivoter',
         zoom: 'Zoom',
         password: 'Mot de passe',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index a08c2786a37c..f6bd7f3e92f4 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: 'Seleziona multipli',
         saveChanges: 'Salva le modifiche',
         submit: 'Invia',
+        submitted: 'Inviato',
         rotate: 'Ruota',
         zoom: 'Zoom',
         password: 'Password',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index fe687d10bd88..a084c41cead7 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: '複数選択',
         saveChanges: '変更を保存',
         submit: '送信',
+        submitted: '送信済み',
         rotate: '回転',
         zoom: 'Zoom',
         password: 'パスワード',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index aef69654742a..b6a4b041cd1d 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: 'Selecteer meerdere',
         saveChanges: 'Wijzigingen opslaan',
         submit: 'Indienen',
+        submitted: 'Ingediend',
         rotate: 'Draaien',
         zoom: 'Zoom',
         password: 'Wachtwoord',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 3a805751f014..b150e3063b96 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: 'Wybierz wiele',
         saveChanges: 'Zapisz zmiany',
         submit: 'Prześlij',
+        submitted: 'Przesłano',
         rotate: 'Obróć',
         zoom: 'Zoom',
         password: 'Hasło',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 1f4e96667b9b..838ebbd5161c 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: 'Selecionar múltiplos',
         saveChanges: 'Salvar alterações',
         submit: 'Enviar',
+        submitted: 'Enviado',
         rotate: 'Girar',
         zoom: 'Zoom',
         password: 'Senha',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 2c6d46f380c2..ca141508f1c1 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -357,6 +357,7 @@ const translations = {
         selectMultiple: '选择多个',
         saveChanges: '保存更改',
         submit: '提交',
+        submitted: '已提交',
         rotate: '旋转',
         zoom: 'Zoom',
         password: '密码',
diff --git a/src/libs/ReportPreviewActionUtils.ts b/src/libs/ReportPreviewActionUtils.ts
index 49797eec4548..1edd0e2c4b64 100644
--- a/src/libs/ReportPreviewActionUtils.ts
+++ b/src/libs/ReportPreviewActionUtils.ts
@@ -227,10 +227,20 @@ function getReportPreviewAction(
     policy?: Policy,
     transactions?: Transaction[],
     invoiceReceiverPolicy?: Policy,
+    isPaidAnimationRunning?: boolean,
+    isSubmittingAnimationRunning?: boolean,
 ): ValueOf<typeof CONST.REPORT.REPORT_PREVIEW_ACTIONS> {
     if (!report) {
         return CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW;
     }
+
+    if (isPaidAnimationRunning) {
+        return CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY;
+    }
+
+    if (isSubmittingAnimationRunning) {
+        return CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT;
+    }
     if (isAddExpenseAction(report, transactions ?? [], isReportArchived)) {
         return CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE;
     }
diff --git a/src/libs/ReportPrimaryActionUtils.ts b/src/libs/ReportPrimaryActionUtils.ts
index 86b32ddce57a..8180eaaac9d7 100644
--- a/src/libs/ReportPrimaryActionUtils.ts
+++ b/src/libs/ReportPrimaryActionUtils.ts
@@ -52,7 +52,7 @@ import {
 } from './TransactionUtils';
 
 type GetReportPrimaryActionParams = {
-    report: Report;
+    report: Report | undefined;
     chatReport: OnyxEntry<Report>;
     reportTransactions: Transaction[];
     violations: OnyxCollection<TransactionViolation[]>;
@@ -61,6 +61,8 @@ type GetReportPrimaryActionParams = {
     reportActions?: ReportAction[];
     isChatReportArchived: boolean;
     invoiceReceiverPolicy?: Policy;
+    isPaidAnimationRunning?: boolean;
+    isSubmittingAnimationRunning?: boolean;
 };
 
 function isAddExpenseAction(report: Report, reportTransactions: Transaction[], isChatReportArchived: boolean) {
@@ -349,7 +351,29 @@ function getAllExpensesToHoldIfApplicable(report?: Report, reportActions?: Repor
 }
 
 function getReportPrimaryAction(params: GetReportPrimaryActionParams): ValueOf<typeof CONST.REPORT.PRIMARY_ACTIONS> | '' {
-    const {report, reportTransactions, violations, policy, reportNameValuePairs, reportActions, isChatReportArchived, chatReport, invoiceReceiverPolicy} = params;
+    const {
+        report,
+        reportTransactions,
+        violations,
+        policy,
+        reportNameValuePairs,
+        reportActions,
+        isChatReportArchived,
+        chatReport,
+        invoiceReceiverPolicy,
+        isPaidAnimationRunning,
+        isSubmittingAnimationRunning,
+    } = params;
+
+    if (isPaidAnimationRunning) {
+        return CONST.REPORT.PRIMARY_ACTIONS.PAY;
+    }
+    if (isSubmittingAnimationRunning) {
+        return CONST.REPORT.PRIMARY_ACTIONS.SUBMIT;
+    }
+    if (!report) {
+        return '';
+    }
 
     const isPayActionWithAllExpensesHeld = isPrimaryPayAction(report, policy, reportNameValuePairs, isChatReportArchived) && hasOnlyHeldExpenses(report?.reportID);