[$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 [email protected] 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): [email protected]
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: 2024-12-25

Issue Owner

Current Issue Owner: @parasharrajat

[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: [email protected]
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]

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

[JmillsExpensify]

Issue wasn't reproducible for two QA runs. I'm inclined to close this issue.

[wildan-m]

@JmillsExpensify @parasharrajat I believe the issue will resurface, please follow my reproducion step here by simulating the loading app using Onyx.merge

#51763 (comment)

[melvin-bot]

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

@JmillsExpensify, @parasharrajat Still overdue 6 days?! Let's take care of this!

[JmillsExpensify]

@parasharrajat thoughts on the latest comment?

[parasharrajat]

I will check it shortly.

[melvin-bot]

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

[parasharrajat]

OK, It seems that the issue exists. @wildan-m Can you please clarify the root cause? Why wrapper style caused this issue? And what will change after your solution?

[wildan-m]

Why wrapper style caused this issue?

@parasharrajat might not have the accurate answer yet, but it's possible that flexbox behaves differently between Android and iOS.

For example, the issue facebook/react-native#8753 closed without a fix, along with another flex-related open issue facebook/react-native#38517.

And what will change after your solution?

My solution implement styling from settlement button which doesn't cause the issue, so my solution is workaround to avoid the bug.

[parasharrajat]

I am looking for a technical analysis that you have done for root cause. Could you please describe it here. You can start by explaining how loading state caused this issue. How split button is getting stretched on loading.

Also, what will change on the UI after your solution?

[parasharrajat]

@wildan-m Any update?

[wildan-m]

@parasharrajat Working on creating a minimum reproducible example in the app, but so far no clues. I believe the issue requires an upstream fix, as it only occurs in native Android.

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

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

[mvtglobally]

Issue not reproducible during KI retests. (Third week)

[JmillsExpensify]

Issue reproducible per the comments above.

[JmillsExpensify]

Going to put a monthly on this one though, as it seems like an upstream fix is required.

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

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