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] 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,