[$2000] Showing a black screen before opening the plaid screen

kavimuru commented 1 year ago

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

Action Performed:

1.Open setting

Click on workspaces
Select any workspace
Click on connect bank account
Click on connect online with plaid
Expected result:

Shouldn't show any other screen before redirect in plaid

Actual result:

Showing black screen then redirect in plaid

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

[x] Android / native
[ ] Android / Chrome
[ ] iOS / native
[ ] iOS / Safari
[ ] MacOS / Chrome / Safari
[ ] MacOS / Desktop

Version Number: 1.3.8.8 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/43996225/235775165-a219c9b0-f9a8-478c-b6c7-05561e212077.mp4

https://user-images.githubusercontent.com/43996225/235775200-cb7aefbb-4744-4204-9160-7d094cae1af8.mp4

Expensify/Expensify Issue URL: Issue reported by: @jaydipramani Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682570253279599

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0181761327897bfb51
Upwork Job ID: 1657415045783519232
Last Price Increase: 2023-05-24

MelvinBot commented 1 year ago

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

MelvinBot commented 1 year ago

Bug0 Triage Checklist (Main S/O)

[x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
[x] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
[x] This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
[x] This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
[x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

alexpensify commented 1 year ago

I'm catching up from being OOO on Friday and Monday, I'll try to test this one soon.

alexpensify commented 1 year ago

I've run out of time this week; I will test over the weekend to continue the process.

alexpensify commented 1 year ago

I was able to verify this is an issue but I see other mentions of black screens: https://github.com/Expensify/App/issues?q=is%3Aissue+black+screen+is%3Aopen. Tomorrow, I'm going to create a thread to identify if we want to fix a larger problem or each issue as they come up.

alexpensify commented 1 year ago

I'll start the thread soon.

alexpensify commented 1 year ago

I'm OOO today and will start the thread tomorrow.

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Current assignee @alexpensify is eligible for the External assigner, not assigning anyone new.

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

alexpensify commented 1 year ago

After thinking about this more, let's address this problem here (one at a time) instead of trying to fix every screen issue. I've assigned the External label.

adilwahla commented 1 year ago

Proposal

Based on the information provided in the GitHub issue, it appears that the problem is related to the app showing a black screen for a brief moment before opening the Plaid screen when users attempt to link their bank accounts. To address this issue, I propose the following solution:

Implement a loading screen that will be displayed while the app loads the Plaid component. Optimize the performance of the app to reduce the loading time required to display the Plaid screen. Implement a caching mechanism to improve the speed at which the app loads data from the server. Minimize the amount of data transferred between the server and the app to reduce the loading time. To achieve these goals, I would suggest the following technical changes:

Use the React Native Navigation library to implement a loading screen that will be displayed while the Plaid component loads. This will provide users with a visual indication that the app is working and reduce the perceived loading time. Use the React Native Performance API to identify areas of the app that can be optimized for performance, such as reducing the size of images or reducing the number of API calls made by the app. Implement a caching mechanism using the React Native Async Storage library. This will allow the app to store frequently accessed data locally, reducing the amount of data that needs to be fetched from the server. Implement data compression techniques, such as Gzip compression, to reduce the amount of data transferred between the server and the app. If my proposal is accepted, I will post it on Upwork as required and provide regular updates on my progress. Once the code is ready for review, I will create a fork of the Expensify/App GitHub repo, create a branch for my changes, and create a pull request to merge my changes into the main codebase. I will also provide screenshots and confirmation that I have tested the pull request on all platforms.

I have reviewed the Expensify Contributor Guidelines and understand the payment timelines and requirements. I am confident that I can deliver high-quality code that meets your requirements and I look forward to the opportunity to work with your team.

Adil Rehman Software Engineer

melvin-bot[bot] commented 1 year ago

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

melvin-bot[bot] commented 1 year ago

📣 @adilwahla! 📣 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:

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.
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.
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>
```

adilwahla commented 1 year ago

Proposal

Based on the information provided in the GitHub issue, it appears that the problem is related to the app showing a black screen for a brief moment before opening the Plaid screen when users attempt to link their bank accounts. To address this issue, I propose the following solution:

Implement a loading screen that will be displayed while the app loads the Plaid component. Optimize the performance of the app to reduce the loading time required to display the Plaid screen. Implement a caching mechanism to improve the speed at which the app loads data from the server. Minimize the amount of data transferred between the server and the app to reduce the loading time. To achieve these goals, I would suggest the following technical changes:

Use the React Native Navigation library to implement a loading screen that will be displayed while the Plaid component loads. This will provide users with a visual indication that the app is working and reduce the perceived loading time. Use the React Native Performance API to identify areas of the app that can be optimized for performance, such as reducing the size of images or reducing the number of API calls made by the app. Implement a caching mechanism using the React Native Async Storage library. This will allow the app to store frequently accessed data locally, reducing the amount of data that needs to be fetched from the server. Implement data compression techniques, such as Gzip compression, to reduce the amount of data transferred between the server and the app. If my proposal is accepted, I will post it on Upwork as required and provide regular updates on my progress. Once the code is ready for review, I will create a fork of the Expensify/App GitHub repo, create a branch for my changes, and create a pull request to merge my changes into the main codebase. I will also provide screenshots and confirmation that I have tested the pull request on all platforms.

I have reviewed the Expensify Contributor Guidelines and understand the payment timelines and requirements. I am confident that I can deliver high-quality code that meets your requirements and I look forward to the opportunity to work with your team.

Adil Rehman Software Engineer

Contributor details Your Expensify account email: adilwahla360@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0169b7cd0e58547220

melvin-bot[bot] commented 1 year ago

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

alexpensify commented 1 year ago

@aimane-chnaif - when you get a chance, can you review this proposal? Thanks!

melvin-bot[bot] commented 1 year ago

@alexpensify @chiragsalian @aimane-chnaif 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!

aimane-chnaif commented 1 year ago

I have reviewed the Expensify Contributor Guidelines

@adilwahla please follow proposal template clearly stated in guideline

alexpensify commented 1 year ago

@dylanexpensify - this one is moving forward, but assigning if a BZ team member is needed to step in while I'm OOO.

adilwahla commented 1 year ago

Proposal

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

Based on the information provided in the GitHub issue, the problem is related to the app showing a black screen for a brief moment before opening the Plaid screen when users attempt to link their bank accounts.

What is the root cause of that problem?

The root cause of this problem is the lack of a loading screen during the loading process of the Plaid component, as well as potential performance optimizations and data transfer inefficiencies.

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

To address this issue, I propose the following solution:

Implement a loading screen that will be displayed while the app loads the Plaid component.
Optimize the performance of the app to reduce the loading time required to display the Plaid screen.
Implement a caching mechanism to improve the speed at which the app loads data from the server.
Minimize the amount of data transferred between the server and the app to reduce the loading time.

What alternative solutions did you explore? (Optional)

No alternative solutions were explored in this proposal.

To achieve these goals, I would suggest the following technical changes:

Use the React Native Navigation library to implement a loading screen that will be displayed while the Plaid component loads. This will provide users with a visual indication that the app is working and reduce the perceived loading time.
Utilize the React Native Performance API to identify areas of the app that can be optimized for performance, such as reducing the size of images or minimizing the number of API calls made by the app.
Implement a caching mechanism using the React Native Async Storage library. This will allow the app to store frequently accessed data locally, reducing the amount of data that needs to be fetched from the server.
Apply data compression techniques, such as Gzip compression, to reduce the amount of data transferred between the server and the app.

If my proposal is accepted, I will post it on Upwork as required and provide regular updates on my progress. Once the code is ready for review, I will create a fork of the Expensify/App GitHub repository, create a branch for my changes, and submit a pull request to merge my code into the main codebase. I will also provide screenshots and confirmation that I have tested the pull request on all platforms.

I have reviewed the Expensify Contributor Guidelines and understand the payment timelines and requirements. I am confident that I can deliver high-quality code that meets your requirements, and I look forward to the opportunity to work with your team.

Contributor details:

Your Expensify account email: adilwahla360@gmail.com Upwork Profile Link: Adil Rehman on Upwork

Adil Rehman Software Engineer

dylanexpensify commented 1 year ago

@aimane-chnaif let's get this reviewed today if we can now that it's in the correct format! 🙇‍♂️

melvin-bot[bot] commented 1 year ago

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

dylanexpensify commented 1 year ago

@aimane-chnaif please give an update today or let us know if we should reassign this! 🙇‍♂️

aimane-chnaif commented 1 year ago

@adilwahla please provide solution in more detail. Which file do you wanna put changes on? And pick up one solution you think is the best. General 4 approaches don't make sense to me.

aimane-chnaif commented 1 year ago

@dylanexpensify sorry I thought I had provided feedback, but actually not 🙇‍♂️. Waiting for better proposals.

melvin-bot[bot] commented 1 year ago

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot[bot] commented 1 year ago

Bug0 Triage Checklist (Main S/O)

[ ] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
[ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
[ ] This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
[ ] This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
[ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

dylanexpensify commented 1 year ago

I'm heading OOO tomorrow for about a week so adding another BZ member while I'm away to help keep the train moving! 🚂 Thanks @joekaufmanexpensify!!

melvin-bot[bot] commented 1 year ago

@alexpensify @chiragsalian @joekaufmanexpensify @aimane-chnaif this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

joekaufmanexpensify commented 1 year ago

Started thread.

melvin-bot[bot] commented 1 year ago

Upwork job price has been updated to $2000

alexpensify commented 1 year ago

@joekaufmanexpensify - I'm going to hold on the reassignment process since there has been some movement today. I have a reminder to open tomorrow.

joekaufmanexpensify commented 1 year ago

@alexpensify I'm starting to get ready for my own OOO next week, so going to let you take this one back!

alexpensify commented 1 year ago

@chiragsalian and @aimane-chnaif - Joe shared some good feedback in this Slack thread - here. We need your feedback. Thanks!

aimane-chnaif commented 1 year ago

We already fixed similar issue in onfido flow by showing fullscreen loading indicator - On going back from identity verification screen, screen shows black for a brief moment. So we can apply same approach to plaid flow.

honnamkuan commented 1 year ago

I believe the black screen here is actually part of the 3rd party plaid flow screen (https://github.com/plaid/react-native-plaid-link-sdk) and is not due to logic within EApp.

alexpensify commented 1 year ago

Thank you for this feedback!

melvin-bot[bot] commented 1 year ago

@alexpensify @chiragsalian @aimane-chnaif this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

Decide whether any proposals currently meet our guidelines and can be approved as-is today
If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

melvin-bot[bot] commented 1 year ago

Current assignee @aimane-chnaif is eligible for the Internal assigner, not assigning anyone new.

alexpensify commented 1 year ago

I've bumped @chiragsalian for feedback.

chiragsalian commented 1 year ago

Yeah, i think the issue is because of the 3rd party plaid flow screen. If someone notices I'm mistaken, please don't hesitate to reopen this issue. I'm closing it for now.

Expensify / App