[$250] Room - No animation when returning to room settings after saving new room description

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.67.0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

precondition: user is an admin of workspace, enabled Invoice in workspace setting and sent at least one invoice

1. Go to https://staging.new.expensify.com/
   and log in
2. Navigate to the invoice room or any other room
3. Click on the header
4. Select the room description
5. Enter new description and click on Save

Expected Result:

There is an animation when returning to the room settings

Actual Result:

There is no animation when returning to the room settings

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6677227_1732643386337.Recording__983.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866175552123050816
• Upwork Job ID: 1866175552123050816
• Last Price Increase: 2024-12-23
• Automatic offers:
• Krishna2323 | Contributor | 105472120

Issue Owner

Current Issue Owner: @Pujan92

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-11-26 18:33:46 UTC.

Proposal


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

Room - No animation when returning to room settings after saving new room description

What is the root cause of that problem?

• Onyx update and navigation is called at the same time, due to that the animation is broken.

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


• Call Report.updateDescription(report.reportID, previousValue, newValue); or goBack() inside InteractionManager.runAfterInteractions.
  

  App/src/pages/RoomDescriptionPage.tsx

  Lines 57 to 63 in 479edfc

  	const submitForm = useCallback(() => {
  	const previousValue = report?.description ?? '';
  	const newValue = description.trim();
  	Report.updateDescription(report.reportID, previousValue, newValue);
  	goBack();
  	}, [report.reportID, report.description, description, goBack]);

• We can do the same in RoomNamePage and other similar page if required.
• We can also return early from submitForm if previousValue & newValue is the same.

What alternative solutions did you explore? (Optional)

• We can use setNavigationActionToMicrotaskQueue.
  Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(backTo ?? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID)));

Result

[Krishna2323]

PROPOSAL UPDATED

• Added alternative

[ChavdaSachin]

Unable to repro... Animations are working fine for me(both chrome and safari).
Is there any specific condition to repro?

[melvin-bot]

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

[johncschuster]

I'm catching up from being OOO for the holiday last week. Will get this slotted in tomorrow.

[melvin-bot]

@johncschuster Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[johncschuster]

I couldn't action this today. I will check it out this weekend.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Pujan92 (External)

[johncschuster]

@lanitochka17 is this reproducible 100% of the time, or are there certain conditions required to reproduce this reliably?

[Husejin]

Proposal: Fix Animation Issue on Room Description Menu Disappearance

Issue

When the "save" button is pressed on the Room Description page, the room description menu sometimes vanishes without an animation. This abrupt disappearance negatively impacts the user experience.

Root Cause

The issue occurs because the goBack function is called immediately after updating the description, not allowing the UI enough time to animate the disappearance of the menu.

Proposed Solution

To ensure the animation is properly handled, we can use the requestAnimationFrame function. This will schedule the goBack function to run after the next repaint, ensuring that the UI updates (including animations) are completed before navigating back.

Detailed Explanation

1. Current Implementation:

   const submitForm = useCallback(() => {
       const previousValue = report?.description ?? '';
       const newValue = description.trim();
   
       Report.updateDescription(report.reportID, previousValue, newValue);
       goBack();
   }, [report.reportID, report.description, description, goBack]);

   In this code, goBack is called immediately after Report.updateDescription, not allowing time for any animations to complete.

2. Proposed Change:

   const submitForm = useCallback(() => {
       const previousValue = report?.description ?? '';
       const newValue = description.trim();
   
       Report.updateDescription(report.reportID, previousValue, newValue);
       requestAnimationFrame(goBack);
   }, [report.reportID, report.description, description, goBack]);

   By using requestAnimationFrame, the goBack function is deferred until the next repaint. This ensures that the UI has time to process any pending updates, including animations, before navigating back.

Benefits

• Improved User Experience: Ensures smooth transitions and animations, providing a better user experience.
• Efficiency: Avoids the need for arbitrary delays, making the code more efficient and responsive.

Action Items

1. Update the submitForm function in src/pages/RoomDescriptionPage.tsx to use requestAnimationFrame for calling goBack.
2. Test the change to ensure the animation issue is resolved and the navigation works as expected.

Code Changes

requestAnimationFrame(goBack);

[melvin-bot]

📣 @Husejin! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Husejin]

📣 @Husejin! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: [https://www.upwork.com/freelancers/~01155e39e78b57de1f]

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

@johncschuster @Pujan92 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[Pujan92]

I am not able to reproduce this issue, @lanitochka17 could you plz recheck and confirm

[Krishna2323]

@Pujan92, I can still reproduce this issue.

Monosnap.screencast.2024-12-12.23-19-48.mp4

[melvin-bot]

@johncschuster, @Pujan92 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[johncschuster]

@Krishna2323 did you do anything beyond what the reproduction steps said above? If so, can you clarify the steps you took to reproduce the issue?

[Krishna2323]

did you do anything beyond what the reproduction steps said above?

@johncschuster, nope. Please make sure to edit the description before saving.

[johncschuster]

Thanks, @Krishna2323!

[melvin-bot]

@johncschuster, @Pujan92 Eep! 4 days overdue now. Issues have feelings too...

[Pujan92]

@Krishna2323's alternate solution of using setNavigationActionToMicrotaskQueue seems to be a common pattern to let execute the Onyx update first and then navigation will solve the issue here. We can proceed with @Krishna2323's proposal.

Let's try to find other places with similar implementation and apply the fix there too(for eg. NotificationPreferencePage, WriteCapabilityPage, ...)

Thanks @Husejin for the proposal, plz go through this doc and use the appropriate proposal template for your next proposals.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @jasperhuangg, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@johncschuster, @Pujan92, @jasperhuangg Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@johncschuster @Pujan92 @jasperhuangg this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot]

@johncschuster, @Pujan92, @jasperhuangg Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@Pujan92, PR ready for review ^