From b28da2d69cd4a8538cd1621fc59342142351e3a9 Mon Sep 17 00:00:00 2001
From: allgandalf <whogandalf@gmail.com>
Date: Tue, 21 Jan 2025 16:31:50 +0530
Subject: [PATCH 1/5] add skeleton states to animate button

---
 src/components/ReportActionItem/ReportPreview.tsx     | 11 +++++++++--
 .../SettlementButton/AnimatedSettlementButton.tsx     |  7 +++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 47520c6b77c8..fc38ae60fcc5 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -173,6 +173,7 @@ function ReportPreview({
 
     const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false);
     const [isApprovedAnimationRunning, setIsApprovedAnimationRunning] = useState(false);
+    const [isSubmitAnimationRunning, setIsSubmitAnimationRunning] = useState(false);
     const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
     const [requestType, setRequestType] = useState<ActionHandledType>();
     const [paymentType, setPaymentType] = useState<PaymentMethodType>();
@@ -246,7 +247,7 @@ function ReportPreview({
 
     const isArchived = isArchivedReport(iouReport);
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
-    const shouldShowSubmitButton = canSubmitReport(iouReport, policy, transactionIDList, transactionViolations);
+    const shouldShowSubmitButton = canSubmitReport(iouReport, policy, transactionIDList, transactionViolations) || isSubmitAnimationRunning;
 
     const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(iouReport);
 
@@ -262,6 +263,7 @@ function ReportPreview({
     const stopAnimation = useCallback(() => {
         setIsPaidAnimationRunning(false);
         setIsApprovedAnimationRunning(false);
+        setIsSubmitAnimationRunning(false);
     }, []);
     const startAnimation = useCallback(() => {
         setIsPaidAnimationRunning(true);
@@ -271,6 +273,10 @@ function ReportPreview({
         setIsApprovedAnimationRunning(true);
         HapticFeedback.longPress();
     }, []);
+    const startSubmitAnimation = useCallback(() => {
+        setIsSubmitAnimationRunning(true);
+        HapticFeedback.longPress();
+    }, []);
 
     const confirmPayment = useCallback(
         (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
@@ -404,7 +410,7 @@ function ReportPreview({
 
     const bankAccountRoute = getBankAccountRoute(chatReport);
 
-    const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation;
+    const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation && !isSubmitAnimationRunning;
 
     const shouldPromptUserToAddBankAccount = (hasMissingPaymentMethod(userWallet, iouReportID) || hasMissingInvoiceBankAccount(iouReportID)) && !isSettled(iouReportID);
     const shouldShowRBR = hasErrors && !iouSettled;
@@ -622,6 +628,7 @@ function ReportPreview({
                                         onlyShowPayElsewhere={onlyShowPayElsewhere}
                                         isPaidAnimationRunning={isPaidAnimationRunning}
                                         isApprovedAnimationRunning={isApprovedAnimationRunning}
+                                        isSubmitAnimationRunning={isSubmitAnimationRunning}
                                         canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
                                         onAnimationFinish={stopAnimation}
                                         formattedAmount={getSettlementAmount() ?? ''}
diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx
index 9a9e6f8de01c..028ba8a022f9 100644
--- a/src/components/SettlementButton/AnimatedSettlementButton.tsx
+++ b/src/components/SettlementButton/AnimatedSettlementButton.tsx
@@ -12,6 +12,7 @@ type AnimatedSettlementButtonProps = SettlementButtonProps & {
     isPaidAnimationRunning: boolean;
     onAnimationFinish: () => void;
     isApprovedAnimationRunning: boolean;
+    isSubmitAnimationRunning: boolean;
     canIOUBePaid: boolean;
 };
 
@@ -21,6 +22,7 @@ function AnimatedSettlementButton({
     isApprovedAnimationRunning,
     isDisabled,
     canIOUBePaid,
+    isSubmitAnimationRunning,
     ...settlementButtonProps
 }: AnimatedSettlementButtonProps) {
     const styles = useThemeStyles();
@@ -48,7 +50,7 @@ function AnimatedSettlementButton({
         marginTop: buttonMarginTop.get(),
     }));
     const buttonDisabledStyle =
-        isPaidAnimationRunning || isApprovedAnimationRunning
+        isPaidAnimationRunning || isApprovedAnimationRunning || isSubmitAnimationRunning
             ? {
                   opacity: 1,
                   ...styles.cursorDefault,
@@ -65,7 +67,7 @@ function AnimatedSettlementButton({
     }, [buttonScale, buttonOpacity, paymentCompleteTextScale, paymentCompleteTextOpacity, height, buttonMarginTop, styles.expenseAndReportPreviewTextButtonContainer.gap]);
 
     useEffect(() => {
-        if (!isApprovedAnimationRunning && !isPaidAnimationRunning) {
+        if (!isApprovedAnimationRunning && !isPaidAnimationRunning && !isSubmitAnimationRunning) {
             resetAnimation();
             return;
         }
@@ -88,6 +90,7 @@ function AnimatedSettlementButton({
     }, [
         isPaidAnimationRunning,
         isApprovedAnimationRunning,
+        isSubmitAnimationRunning,
         onAnimationFinish,
         buttonOpacity,
         buttonScale,

From 7dc48fae60642270eafa896eb4d07d9f3710df2f Mon Sep 17 00:00:00 2001
From: allgandalf <whogandalf@gmail.com>
Date: Tue, 25 Feb 2025 17:04:40 +0530
Subject: [PATCH 2/5] animate the submit button

---
 src/CONST.ts                                  |  3 +
 .../ReportActionItem/ReportPreview.tsx        | 34 ++++----
 src/components/SubmitButtonWithAnimation.tsx  | 83 +++++++++++++++++++
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 5 files changed, 106 insertions(+), 16 deletions(-)
 create mode 100644 src/components/SubmitButtonWithAnimation.tsx

diff --git a/src/CONST.ts b/src/CONST.ts
index 4cec868320a7..4c90e3e9de38 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -387,6 +387,9 @@ const CONST = {
     ANIMATION_THUMBSUP_DURATION: 250,
     ANIMATION_THUMBSUP_DELAY: 200,
     ANIMATION_PAID_BUTTON_HIDE_DELAY: 1000,
+    ANIMATION_SUBMITTED_TEXT_DELAY: 500,
+    ANIMATION_SUBMITTED_HEIGHT_DURATION: 1000,
+    ANIMATION_SUBMITTED_TEXT_DURATION: 2000,
     BACKGROUND_IMAGE_TRANSITION_DURATION: 1000,
     SCREEN_TRANSITION_END_TIMEOUT: 1000,
     ARROW_HIDE_DELAY: 3000,
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 30790139b353..67e85bbf7ff1 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -84,6 +84,7 @@ import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActio
 import variables from '@styles/variables';
 import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidIOUActions, canSubmitReport, payInvoice, payMoneyRequest, submitReport} from '@userActions/IOU';
 import Timing from '@userActions/Timing';
+import SubmitButtonWithAnimation from '@src/components/SubmitButtonWithAnimation';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -174,7 +175,6 @@ function ReportPreview({
 
     const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false);
     const [isApprovedAnimationRunning, setIsApprovedAnimationRunning] = useState(false);
-    const [isSubmitAnimationRunning, setIsSubmitAnimationRunning] = useState(false);
     const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
     const [requestType, setRequestType] = useState<ActionHandledType>();
     const [paymentType, setPaymentType] = useState<PaymentMethodType>();
@@ -246,12 +246,17 @@ function ReportPreview({
         formattedMerchant = null;
     }
 
+    const [isSubmitAnimationRunning, setIsSubmitAnimationRunning] = useState(false);
+
+    const startSubmitAnimation = useCallback(() => {
+        setIsSubmitAnimationRunning(true);
+        HapticFeedback.longPress();
+    }, []);
+
     const isArchived = isArchivedReportWithID(iouReport?.reportID);
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
-
-    const shouldShowSubmitButton = canSubmitReport(iouReport, policy, transactionIDList, transactionViolations) || isSubmitAnimationRunning;
     const filteredTransactions = transactions?.filter((transaction) => transaction) ?? [];
-    const shouldShowSubmitButton = canSubmitReport(iouReport, policy, filteredTransactions, violations);
+    const shouldShowSubmitButton = canSubmitReport(iouReport, policy, filteredTransactions, violations) || isSubmitAnimationRunning;
     const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(iouReport);
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
@@ -276,11 +281,6 @@ function ReportPreview({
         setIsApprovedAnimationRunning(true);
         HapticFeedback.longPress();
     }, []);
-    const startSubmitAnimation = useCallback(() => {
-        setIsSubmitAnimationRunning(true);
-        HapticFeedback.longPress();
-    }, []);
-
     const confirmPayment = useCallback(
         (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
             if (!type) {
@@ -424,8 +424,8 @@ function ReportPreview({
 
     const bankAccountRoute = getBankAccountRoute(chatReport);
 
-    const shouldShowSettlementButton = !shouldShowSubmitButton && (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation && !isSubmitAnimationRunning;
-
+    const shouldShowSettlementButton =
+        !shouldShowSubmitButton && (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation && !isSubmitAnimationRunning;
 
     const shouldPromptUserToAddBankAccount = (hasMissingPaymentMethod(userWallet, iouReportID) || hasMissingInvoiceBankAccount(iouReportID)) && !isSettled(iouReportID);
     const shouldShowRBR = hasErrors && !iouSettled;
@@ -674,11 +674,13 @@ function ReportPreview({
                                     />
                                 )}
                                 {shouldShowSubmitButton && (
-                                    <Button
-                                        success={isWaitingForSubmissionFromCurrentUser}
-                                        text={translate('common.submit')}
-                                        onPress={() => iouReport && submitReport(iouReport)}
-                                        isDisabled={shouldDisableSubmitButton}
+                                    <SubmitButtonWithAnimation
+                                        isWaitingForSubmissionFromCurrentUser={isWaitingForSubmissionFromCurrentUser}
+                                        shouldDisableSubmitButton={shouldDisableSubmitButton}
+                                        iouReport={iouReport}
+                                        startSubmitAnimation={startSubmitAnimation}
+                                        isSubmitAnimationRunning={isSubmitAnimationRunning}
+                                        onAnimationFinish={stopAnimation}
                                     />
                                 )}
                             </View>
diff --git a/src/components/SubmitButtonWithAnimation.tsx b/src/components/SubmitButtonWithAnimation.tsx
new file mode 100644
index 000000000000..ea7525c2d874
--- /dev/null
+++ b/src/components/SubmitButtonWithAnimation.tsx
@@ -0,0 +1,83 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import {ActivityIndicator} from 'react-native';
+import {OnyxEntry} from 'react-native-onyx';
+import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import {submitReport} from '@libs/actions/IOU';
+import CONST from '@src/CONST';
+import type * as OnyxTypes from '@src/types/onyx';
+import Button from './Button';
+import {Send} from './Icon/Expensicons';
+
+interface SubmitButtonWithAnimationProps {
+    isWaitingForSubmissionFromCurrentUser?: boolean;
+    iouReport: OnyxEntry<OnyxTypes.Report>;
+    shouldDisableSubmitButton: boolean;
+    startSubmitAnimation: () => void;
+    isSubmitAnimationRunning: boolean;
+    onAnimationFinish: () => void;
+}
+
+function SubmitButtonWithAnimation({
+    isWaitingForSubmissionFromCurrentUser,
+    iouReport,
+    shouldDisableSubmitButton,
+    startSubmitAnimation,
+    isSubmitAnimationRunning,
+    onAnimationFinish,
+}: SubmitButtonWithAnimationProps) {
+    const {translate} = useLocalize();
+    const height = useSharedValue(40);
+    const opacity = useSharedValue(1);
+
+    const [showLoadingIndicator, setShowLoadingIndicator] = useState(false);
+    const [showSubmittedText, setShowSubmittedText] = useState(false);
+
+    const containerStyles = useAnimatedStyle(() => ({
+        height: height.value,
+        opacity: opacity.value,
+        overflow: 'hidden',
+    }));
+
+    useEffect(() => {
+        if (!isSubmitAnimationRunning) {
+            height.value = 40;
+            opacity.value = 1;
+            return;
+        }
+
+        // Step 1: Show loading indicator for 1 second
+        setShowLoadingIndicator(true);
+        setTimeout(() => {
+            setShowLoadingIndicator(false);
+            setShowSubmittedText(true);
+        }, 1000);
+
+        // Step 2: Show "Submitted" text for 1 second
+        setTimeout(() => {
+            opacity.value = withTiming(0, {duration: CONST.ANIMATION_SUBMITTED_TEXT_DELAY});
+            height.value = withTiming(0, {duration: CONST.ANIMATION_SUBMITTED_HEIGHT_DURATION}, () => runOnJS(onAnimationFinish)());
+        }, CONST.ANIMATION_SUBMITTED_TEXT_DURATION);
+    }, [isSubmitAnimationRunning, onAnimationFinish, height, opacity]);
+
+    return (
+        <Animated.View style={containerStyles}>
+            <Button
+                success={isWaitingForSubmissionFromCurrentUser}
+                icon={showSubmittedText ? Send : undefined}
+                text={showSubmittedText ? translate('common.submitted') : translate('common.submit')}
+                isLoading={showLoadingIndicator}
+                onPress={() => {
+                    startSubmitAnimation();
+                    iouReport && submitReport(iouReport);
+                }}
+                isDisabled={shouldDisableSubmitButton}
+            />
+        </Animated.View>
+    );
+}
+
+SubmitButtonWithAnimation.displayName = 'SubmitButtonWithAnimation';
+
+export default SubmitButtonWithAnimation;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 86ace0b6a5de..284983c28c59 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -271,6 +271,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 77cfc7e302f0..1c476f8a3444 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -262,6 +262,7 @@ const translations = {
         save: 'Guardar',
         saveChanges: 'Guardar cambios',
         submit: 'Enviar',
+        submitted: 'Enviado',
         rotate: 'Rotar',
         zoom: 'Zoom',
         password: 'Contraseña',

From a134d14260fce2b6a61545e81403fe81da8c40d2 Mon Sep 17 00:00:00 2001
From: allgandalf <whogandalf@gmail.com>
Date: Tue, 25 Feb 2025 17:07:20 +0530
Subject: [PATCH 3/5] revert back animatedSettlementbutton props

---
 src/components/ReportActionItem/ReportPreview.tsx          | 1 -
 .../SettlementButton/AnimatedSettlementButton.tsx          | 7 ++-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 67e85bbf7ff1..51ceb1e3f167 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -632,7 +632,6 @@ function ReportPreview({
                                         onlyShowPayElsewhere={onlyShowPayElsewhere}
                                         isPaidAnimationRunning={isPaidAnimationRunning}
                                         isApprovedAnimationRunning={isApprovedAnimationRunning}
-                                        isSubmitAnimationRunning={isSubmitAnimationRunning}
                                         canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
                                         onAnimationFinish={stopAnimation}
                                         formattedAmount={getSettlementAmount() ?? ''}
diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx
index 028ba8a022f9..9a9e6f8de01c 100644
--- a/src/components/SettlementButton/AnimatedSettlementButton.tsx
+++ b/src/components/SettlementButton/AnimatedSettlementButton.tsx
@@ -12,7 +12,6 @@ type AnimatedSettlementButtonProps = SettlementButtonProps & {
     isPaidAnimationRunning: boolean;
     onAnimationFinish: () => void;
     isApprovedAnimationRunning: boolean;
-    isSubmitAnimationRunning: boolean;
     canIOUBePaid: boolean;
 };
 
@@ -22,7 +21,6 @@ function AnimatedSettlementButton({
     isApprovedAnimationRunning,
     isDisabled,
     canIOUBePaid,
-    isSubmitAnimationRunning,
     ...settlementButtonProps
 }: AnimatedSettlementButtonProps) {
     const styles = useThemeStyles();
@@ -50,7 +48,7 @@ function AnimatedSettlementButton({
         marginTop: buttonMarginTop.get(),
     }));
     const buttonDisabledStyle =
-        isPaidAnimationRunning || isApprovedAnimationRunning || isSubmitAnimationRunning
+        isPaidAnimationRunning || isApprovedAnimationRunning
             ? {
                   opacity: 1,
                   ...styles.cursorDefault,
@@ -67,7 +65,7 @@ function AnimatedSettlementButton({
     }, [buttonScale, buttonOpacity, paymentCompleteTextScale, paymentCompleteTextOpacity, height, buttonMarginTop, styles.expenseAndReportPreviewTextButtonContainer.gap]);
 
     useEffect(() => {
-        if (!isApprovedAnimationRunning && !isPaidAnimationRunning && !isSubmitAnimationRunning) {
+        if (!isApprovedAnimationRunning && !isPaidAnimationRunning) {
             resetAnimation();
             return;
         }
@@ -90,7 +88,6 @@ function AnimatedSettlementButton({
     }, [
         isPaidAnimationRunning,
         isApprovedAnimationRunning,
-        isSubmitAnimationRunning,
         onAnimationFinish,
         buttonOpacity,
         buttonScale,

From 35e1978f5be43fe22363b529bc32c90c64790115 Mon Sep 17 00:00:00 2001
From: allgandalf <whogandalf@gmail.com>
Date: Tue, 25 Feb 2025 17:13:07 +0530
Subject: [PATCH 4/5] fix esLint

---
 .../ReportActionItem/ReportPreview.tsx        |  3 +--
 src/components/SubmitButtonWithAnimation.tsx  | 20 +++++++++----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
index 51ceb1e3f167..7ed612a00c5e 100644
--- a/src/components/ReportActionItem/ReportPreview.tsx
+++ b/src/components/ReportActionItem/ReportPreview.tsx
@@ -4,7 +4,6 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated';
-import Button from '@components/Button';
 import {getButtonRole, getButtonStyle} from '@components/Button/utils';
 import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import Icon from '@components/Icon';
@@ -82,7 +81,7 @@ import {
 } from '@libs/TransactionUtils';
 import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import variables from '@styles/variables';
-import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidIOUActions, canSubmitReport, payInvoice, payMoneyRequest, submitReport} from '@userActions/IOU';
+import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidIOUActions, canSubmitReport, payInvoice, payMoneyRequest} from '@userActions/IOU';
 import Timing from '@userActions/Timing';
 import SubmitButtonWithAnimation from '@src/components/SubmitButtonWithAnimation';
 import CONST from '@src/CONST';
diff --git a/src/components/SubmitButtonWithAnimation.tsx b/src/components/SubmitButtonWithAnimation.tsx
index ea7525c2d874..b3151a6e2f58 100644
--- a/src/components/SubmitButtonWithAnimation.tsx
+++ b/src/components/SubmitButtonWithAnimation.tsx
@@ -1,8 +1,6 @@
-import React, {useCallback, useEffect, useState} from 'react';
-import {ActivityIndicator} from 'react-native';
+import React, {useEffect, useState} from 'react';
 import {OnyxEntry} from 'react-native-onyx';
 import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import {submitReport} from '@libs/actions/IOU';
 import CONST from '@src/CONST';
@@ -10,14 +8,14 @@ import type * as OnyxTypes from '@src/types/onyx';
 import Button from './Button';
 import {Send} from './Icon/Expensicons';
 
-interface SubmitButtonWithAnimationProps {
+type SubmitButtonWithAnimationProps = {
     isWaitingForSubmissionFromCurrentUser?: boolean;
     iouReport: OnyxEntry<OnyxTypes.Report>;
     shouldDisableSubmitButton: boolean;
     startSubmitAnimation: () => void;
     isSubmitAnimationRunning: boolean;
     onAnimationFinish: () => void;
-}
+};
 
 function SubmitButtonWithAnimation({
     isWaitingForSubmissionFromCurrentUser,
@@ -35,15 +33,15 @@ function SubmitButtonWithAnimation({
     const [showSubmittedText, setShowSubmittedText] = useState(false);
 
     const containerStyles = useAnimatedStyle(() => ({
-        height: height.value,
-        opacity: opacity.value,
+        height: height.get(),
+        opacity: opacity.get(),
         overflow: 'hidden',
     }));
 
     useEffect(() => {
         if (!isSubmitAnimationRunning) {
-            height.value = 40;
-            opacity.value = 1;
+            height.set(40);
+            opacity.set(1);
             return;
         }
 
@@ -56,8 +54,8 @@ function SubmitButtonWithAnimation({
 
         // Step 2: Show "Submitted" text for 1 second
         setTimeout(() => {
-            opacity.value = withTiming(0, {duration: CONST.ANIMATION_SUBMITTED_TEXT_DELAY});
-            height.value = withTiming(0, {duration: CONST.ANIMATION_SUBMITTED_HEIGHT_DURATION}, () => runOnJS(onAnimationFinish)());
+            opacity.set(withTiming(0, {duration: CONST.ANIMATION_SUBMITTED_TEXT_DELAY}));
+            height.set(withTiming(0, {duration: CONST.ANIMATION_SUBMITTED_HEIGHT_DURATION}, () => runOnJS(onAnimationFinish)()));
         }, CONST.ANIMATION_SUBMITTED_TEXT_DURATION);
     }, [isSubmitAnimationRunning, onAnimationFinish, height, opacity]);
 

From c8468063107909ba2c616d433ac1750bf4ad1ca7 Mon Sep 17 00:00:00 2001
From: allgandalf <whogandalf@gmail.com>
Date: Tue, 25 Feb 2025 17:16:51 +0530
Subject: [PATCH 5/5] fix changed files lint

---
 src/components/SubmitButtonWithAnimation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SubmitButtonWithAnimation.tsx b/src/components/SubmitButtonWithAnimation.tsx
index b3151a6e2f58..554337ad9b5f 100644
--- a/src/components/SubmitButtonWithAnimation.tsx
+++ b/src/components/SubmitButtonWithAnimation.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {OnyxEntry} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import useLocalize from '@hooks/useLocalize';
 import {submitReport} from '@libs/actions/IOU';
