[Due for payment 2025-09-23] [HOLD #58479][$250] Animate the `Submit` button, for consistency with animations for `Approve` and `Pay`

[JmillsExpensify]

Problem

We have an confusing inconsistency, in that if you Submit a report, there is no feedback and the report action button disappears on submission. Meanwhile we have animations (and feedback) for the Approve and Pay report action buttons.

Solution

Simple! Let's animate the Submit button for consistency with other report actions. More specifically, we will:

• Animate the Submit button in the report preview
• Animate the Submit button in the report header
• Animate the Submit button in the search/reports page row

Again, the button animation will be consistent and apply anywhere we show the Submit button. Said animation works like in this practice.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021877717460312182126
• Upwork Job ID: 1877717460312182126
• Last Price Increase: 2025-01-10
• Automatic offers:
• shubham1206agra | Reviewer | 105644638
• allgandalf | Contributor | 105644639

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[shubham1206agra]

Edited by proposal-police: This proposal was edited at 2025-01-10 12:45:58 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Animate the Submit button

What is the root cause of that problem?

Feature Request

What changes do you think we should make in order to solve the problem?

Note

I am not wall-posting the entire code since it is trivial enough to be figured out.

Animate button similar to AnimatedSettlementButton here

App/src/components/ReportActionItem/ReportPreview.tsx

Line 618 in 219e66d

<Button

Add a new state called isSubmitAnimationRunning that tracks if the animation is running or not.

Add new function

const startApprovedAnimation = useCallback(() => {
        setIsSubmitAnimationRunning(true);
        HapticFeedback.longPress(); // <- Not sure about this
    }, []);

And modify the stopAnimation function to

const stopAnimation = useCallback(() => {
        setIsPaidAnimationRunning(false);
        setIsApprovedAnimationRunning(false);
        setIsSubmitAnimationRunning(false);
    }, []);

And modify these conditions

App/src/components/ReportActionItem/ReportPreview.tsx

Line 365 in 219e66d

const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation;

to

const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation && !isSubmitAnimationRunning;

and

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 203 to 208 in 219e66d

	const shouldShowSubmitButton =
	isOpenExpenseReport &&
	reimbursableSpend !== 0 &&
	!showRTERViolationMessage &&
	!shouldShowBrokenConnectionViolation &&
	(iouReport?.ownerAccountID === currentUserAccountID || isAdmin || iouReport?.managerID === currentUserAccountID);

to

const shouldShowSubmitButton =
        (isOpenExpenseReport &&
        reimbursableSpend !== 0 &&
        !showRTERViolationMessage &&
        !shouldShowBrokenConnectionViolation &&
        (iouReport?.ownerAccountID === currentUserAccountID || isAdmin || iouReport?.managerID === currentUserAccountID)) || isSubmitAnimationRunning;

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021877717460312182126