[HOLD for payment 2025-01-17] [$250] Android - Accounting-Export button with dropdown goes out of preview component while loading

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.55-8
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): nathanmulugetatesting+1959@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

Pre-condition:

• Workspace is connected to QBO or any of accounting integrations
• An expense is submitted and paid

1. Go to troubleshoot and clear cache and restart
2. Open the workspace chat where the paid expense lives

Expected Result:

The export button with the dropdown doesn't get shown until chat history is fully loaded (Web behavior)

Actual Result:

The export button with the dropdown is visible with a weird loading status and the box goes out of the expense preview component

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

Bug6650549_1730314648141.Screen_Recording_20241030_214838.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854228557201867351
• Upwork Job ID: 1854228557201867351
• Last Price Increase: 2025-01-01
• Automatic offers:
• wildan-m | Contributor | 105570789

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (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.

[lanitochka17]

@JmillsExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[JmillsExpensify]

Not sure how important this is, though opening up to the community for creative ideas on the solution to this one.

[Antony-Gh]

Proposal for Issue #51763: Fixing Misalignment of Export Button with Dropdown

Approach:
To resolve the export button's visibility and alignment issues during chat history loading, I propose a solution that includes a conditional loading check and alignment adjustments. This approach ensures the export button and dropdown remain hidden until chat history is fully loaded, emulating the correct web behavior.

Technical Solution:

1. Loading State Check: Add a conditional check on the chat loading state. Render a loading indicator (ActivityIndicator) in place of the export button until the chat history completes loading.

2. Visibility Control: Once loading is finished, replace the loading indicator with the export button and dropdown, ensuring proper alignment within the component.

3. CSS Adjustments: Adjust position, margin, or padding properties for consistent alignment, preventing overflow from the expense preview component.

Testing Plan:

1. Cross-Platform Testing: Verify functionality on both Android and iOS to ensure the export button only appears after chat history loads.

2. UI Consistency: Ensure correct alignment across various screen sizes and orientations.
   Performance Check: Confirm no added delays or regressions in loading time.

This solution aligns with the expected behavior and maintains a consistent user experience across platforms. Let me know if there are additional requirements, and I’d be happy to make adjustments.

[melvin-bot]

📣 @Antony-Gh! 📣
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>

[Antony-Gh]

Contributor details
My Expensify account email: knkmam05@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01e3382cbfefc7a01f

[melvin-bot]

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

[parasharrajat]

@Antony-Gh, please follow the contributing guidelines for creating a proposal. #51763 (comment)

[Antony-Gh]

Proposal submitted

[parasharrajat]

Where did you submit the proposal? We need that here on GitHub. All the details are available on this https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md.

[Antony-Gh]

Proposal for Issue #51763: Fixing Misalignment of Export Button with Dropdown in Expensify App
Problem Statement
In the New Expensify app, the export button displays misalignment issues during chat history loading, resulting in poor user experience and interface inconsistency. This issue prevents users from accessing the export functionality effectively, especially on specific devices and screen sizes, potentially leading to frustration and increased support requests.

Solution
To address these visibility and alignment issues, I propose implementing a conditional loading check combined with alignment adjustments. This approach ensures the export button and dropdown remain hidden until the chat history fully loads, maintaining a consistent and polished experience across platforms.

Approach
Design and Planning: Develop a plan to control the export button's visibility and alignment until loading completes. Create mock-ups to visualize improvements to ensure alignment with Expensify’s UI standards.

Implementation: Make targeted code adjustments, specifically:

Loading State Check: Add a conditional check on the chat loading state. A loading indicator (ActivityIndicator) will appear in place of the export button until loading finishes.
Visibility Control: After loading, replace the indicator with the export button and dropdown, ensuring correct positioning within the layout.
CSS Adjustments: Fine-tune position, margin, and padding properties to achieve consistent alignment, avoiding overflow from adjacent components.
Efficiency Improvements: Optimize code to handle the loading and rendering process smoothly without affecting the app’s performance.
Technical Implementation:

Override the export button functionality to include dynamic loading checks, enhancing control over the button's visibility.
Improve alignment and efficiency by introducing optimized async processing where necessary.
Testing Plan
Multi-Platform Testing: Verify functionality on Web, Desktop, iOS, Android, and Mobile Web platforms to confirm alignment and visibility behave consistently across devices.

UI Consistency: Ensure the button remains aligned correctly on different screen sizes and orientations.

Performance Check: Confirm that these adjustments introduce no additional delays in loading time.

Expected Outcome: Users should experience a more consistent interface with seamless access to the export button after loading, reducing frustration and clicks needed to locate this functionality.

Documentation and Feedback
Document changes in the README, detailing the updated loading and alignment checks. Submit a pull request with screenshots of the fix across platforms, including descriptions of new components or functions.

Timeline
Design and Planning: 2 days
Development and Implementation: 4 days
Testing and Validation: 3 days
Total expected time: 9 days.

Final Checklist
Upon deployment, I will:

Propose regression testing steps.
Note the offending PR that may have caused the issue.
Add comments on the PR with insights into the bug and preventive methods.
Initiate discussions on additional prevention strategies.

[Antony-Gh]

What now ?

[parasharrajat]

This does not follow our standard template. If possible, please update it.

[melvin-bot]

@JmillsExpensify, @parasharrajat Whoops! This issue is 2 days overdue. Let's get this updated quick!

[parasharrajat]

Waiting for more proposals.

[melvin-bot]

@JmillsExpensify @parasharrajat 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!

[melvin-bot]

📣 @wildan-m 🎉 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 📖

[wildan-m]

@parasharrajat we can use Onyx.merge('isLoadingApp', true) to expose the bug, but the tester might not be able to do that since they will not use Flipper to inject the script, do you have any suggestion for test step? or we'll just use the OP steps to test the PR?

[parasharrajat]

Let's use the OP for now. I will see if I can provide more details.

[wildan-m]

@parasharrajat The PR is ready #54852. Thanks!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.82-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Android-Accounting-Export button with dropdown goes out of preview component while loading #54852

If no regressions arise, payment will be issued on 2025-01-17. 🎊

For reference, here are some details about the assignees on this issue:

• @wildan-m requires payment automatic offer (Contributor)
• @parasharrajat requires payment through NewDot Manual Requests

[melvin-bot]

@parasharrajat @JmillsExpensify @parasharrajat The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[JmillsExpensify]

Payment summary:

• Contributor: @wildan-m $250 via Upwork
• Reviewer: @parasharrajat $250 via New Expensify

@parasharrajat mind completing the BZ checklist when you get a chance?

[JmillsExpensify]

Contributor paid out. I'm going to close this issue, and we'll circle back for payment/checklist/regression tests (if needed).

[parasharrajat]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/47243/files#r1920155337

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: Not needed

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• Workspace is connected to QBO or any of accounting integrations
• An expense is submitted and paid, ensure no other chat after creating the expense

Test:

1. Go to troubleshoot and clear cache and restart
2. Open the workspace chat where the paid expense lives
3. Tap on the newest report preview
4. Back
5. Verify that the button layout does not go out of the preview component.
6. Try to log in again and load that chat to see the loading preview. (Steps from feat: show last message while loading others #47243 can be followed to see the loading preview).
7. Verify that the button layout does not go out of the preview component.

Do we agree 👍 or 👎

[parasharrajat]

Payment requested as per #51763 (comment)

[mallenexpensify]

Contributor: @wildan-m paid $250 via Upwork
Reviewer: @parasharrajat paid $250 via New Expensify

[JmillsExpensify]

$250 approved for @parasharrajat