[$4000] Android - Chat - Empty chat (black screen) is displayed instead of messages

kbecciv 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:

Go https://staging.new.expensify.com/ , login, copy URL of any chat, save it in Email (or slack, or Telegram) for later to tap
Open Android NewDot app (could be logged in or logged out)
Tap deep link from step 1

Expected Result:

Chat should be open with previous history.

Actual Result:

Empty chat (like black screen) is displayed instead of messages

Workaround:

Unknown

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

Reproducible in staging?: Yes

Reproducible in production?: Yes

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/93399543/233865409-7349c550-cb89-44e5-81a9-eaf1bc2072ae.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~018e845ce5e7422dc1
Upwork Job ID: 1654063892620099584
Last Price Increase: 2023-05-19

MelvinBot commented 1 year ago

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

MelvinBot 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

maddylewis commented 1 year ago

oopsie! let me try repo'ing this one now!

MelvinBot commented 1 year ago

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

maddylewis commented 1 year ago

im still waiting to get access to browserstack so that i can test on an android device - https://expensify.slack.com/archives/C01SKUP7QR0/p1682442907291169?thread_ts=1682442046.213409&cid=C01SKUP7QR0

i am re-adding the bug label to reassign this. @dylanexpensify if you have a recently assigned bug issue, please assign it to me! thank you!

dylanexpensify commented 1 year ago

Woot! gotchu!

dylanexpensify commented 1 year ago

Hmmm can't repro. @kbecciv can you confirm if this is still occurring?

dylanexpensify commented 1 year ago

bump @kbecciv

kbecciv commented 1 year ago

Hello @dylanexpensify! Checking, will update you shortly.

kbecciv commented 1 year ago

@dylanexpensify Issue is reproductible with build 1.3.8.8

https://user-images.githubusercontent.com/93399543/235657139-41f01c89-0fe2-46f0-ba1a-19b620169d72.mp4

dylanexpensify commented 1 year ago

Thanks @kbecciv! Didn't get to this today due to focusing on ECUK and CPM tasks! Will review tomorrow!

dylanexpensify commented 1 year ago

Nice, got it! TY

MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

therealsujitk commented 1 year ago

Proposal

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

The list of comments don't show at random times, after the skeleton animation it just shows a blank page.

Note: This issue doesn't happen only when you click on a URL to open a chat, it happens randomly when you go back and fourth chats.

https://user-images.githubusercontent.com/60378235/236403601-61975a73-42a8-4580-aab4-aae69418eae2.mp4

What is the root cause of that problem?

The cause of this problem is the react-native-reanimated package. To display the comments animation style has been added to animate the opacity from 0 to 1 in 100ms. This animation seems to fail at random times keeping the opacity set to 0.

https://github.com/Expensify/App/blob/3585329ec6fe8a8bed127fc44b06ff698380a440/src/pages/home/report/ReportActionsList.js#L79-L85

A similar issue was also opened by someone else in the react-native-reanimated repository.

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

The requirement here is a fairly simple fade animation, which is why I suggest using react natives built-in Animated API which works quite well and doesn't have this issue (I've tested).

What alternative solutions did you explore? (Optional)

The issue seems to go away when you increase the animation duration, however this solution is not foolproof.
Other react native animation libraries can be used, however similar or worse issues might show up.

dylanexpensify commented 1 year ago

Didn't get to this today due to prioritizing Payroll, CPM, ECUK items! Will review Monday!

melvin-bot[bot] commented 1 year ago

@alex-mechler @dylanexpensify @0xmiroslav 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!

dylanexpensify commented 1 year ago

@0xmiroslav can we get reviews on proposals and an update today please?

0xmiros commented 1 year ago

@therealsujitk this is a recent regression. This didn't happen before, at least 2 months ago. It would be good if you can find out exact PR which caused this regression. Btw, I can't evaluate your proposal yet since I don't have consistent reproducible step. But for sure it happens randomly.

therealsujitk commented 1 year ago

@0xmiroslav found it! https://github.com/Expensify/App/pull/16613. And it was previously animated the way I suggested in my proposal, that could be when this issue started occurring (March 28, few days over a month ago).

Btw, I can't evaluate your proposal yet since I don't have consistent reproducible step. But for sure it happens randomly.

Have you tried the method I mentioned in my proposal? Going back-and-fourth chats on Android.

0xmiros commented 1 year ago

@therealsujitk #16613 is just refactor PR. So you mean that it doesn't happen in class component but happens in functional component?

therealsujitk commented 1 year ago

@0xmiroslav no no, this refactoring also involved migrating the animation to use the react-native-reanimated package which caused this issue. Nothing to do with the refactor.

0xmiros commented 1 year ago

Here's PR which updates that package version. @therealsujitk can you confirm if this is still reproducible or not after update?

therealsujitk commented 1 year ago

@0xmiroslav I just checked by upgrading the package, recompiling the application, clearing metro cache, recompiling again, and the issue still exists in react-native-reanimated@3.1.0.

P.S. sorry for the delay, my laptop is really slow and takes a while to build.

0xmiros commented 1 year ago

@therealsujitk no problem. do you have reproducible step? (no need 100% if not possible but very often) I am still struggling to reproduce (1-2 times upon 10 tries)

therealsujitk commented 1 year ago

@0xmiroslav I mentioned a method to reproduce this in my proposal by going back-and-fourth chats. Also, I believe this issue might have something to do with the phone's performance, so if you have a slightly older android phone or if you can temporarily reduce your android emulator's RAM maybe that would help?

mvtglobally commented 1 year ago

Issue not reproducible during KI retests. (First week)

therealsujitk commented 1 year ago

@0xmiroslav @mvtglobally I was able to reproduce it on an online emulator, you can give it a try here.

Screencast from 09-05-23 07:04:14 PM IST.webm

Note: I get only about 50 free minutes per month out of which about 15 minutes are used.

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? 💸

melvin-bot[bot] commented 1 year ago

@alex-mechler, @dylanexpensify, @0xmiroslav Whoops! This issue is 2 days overdue. Let's get this updated quick!

alex-mechler commented 1 year ago

@0xmiroslav have you been able to get a reproduction with @therealsujitk's suggestions?

melvin-bot[bot] commented 1 year ago

@alex-mechler @dylanexpensify @0xmiroslav 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!

0xmiros commented 1 year ago

yes, I am able to reproduce constantly in emulator.

There are 2 issues here with different root causes:

shows empty chat briefly instead of skeleton before loading report data
shows empty chat forever after data fully loaded

I confirmed both bugs by setting this value to 0.5 https://github.com/Expensify/App/blob/6c10bb2b36069b74e2dfcc5a97c42c2be6e767e1/src/pages/home/report/ReportActionsList.js#L80

https://github.com/Expensify/App/assets/97473779/ab92cc4c-3763-4d9e-bc22-53c373a6f2d9

@alex-mechler should we fix both here or only 2nd one?

therealsujitk commented 1 year ago

I'm trying to figure out why the first issue is happening. It's not react-reanimated since we use a package called react-content-loader for this. I'm honestly not sure if this can be fixed, could be related to https://github.com/danilowoz/react-content-loader/issues/257.

alex-mechler commented 1 year ago

@0xmiroslav we should fix both. If we have data we are currently loading, we should show the skeleton. If we have already loaded the data, we should be showing the chat. We should not be showing a blank page in either situation

0xmiros commented 1 year ago

ok, we're still open for proposals to fix both cases

mvtglobally commented 1 year ago

Issue not reproducible during KI retests. (Second week)

dylanexpensify commented 1 year ago

@0xmiroslav to confirm, we have no pending or accepted proposals, correct?

0xmiros commented 1 year ago

@dylanexpensify correct

dylanexpensify commented 1 year ago

Ok, thank you! Doubling to get some steam

melvin-bot[bot] commented 1 year ago

Upwork job price has been updated to $2000

melvin-bot[bot] commented 1 year ago

Upwork job price has been updated to $4000

dylanexpensify commented 1 year ago

Updated again to increase urgency

therealsujitk commented 1 year ago

@0xmiroslav I was wondering if maybe InteractionManager.runAfterInteractions() could help with this issue, I just saw this used somewhere else and when I googled what it was it seemed to fit the issue (I think), however I'm not sure if it'll actually work or if it can even be used here.

Here's the funny part, I can't reproduce this on my phone anymore :sweat_smile:, I'm not sure what happened to this project in the past week but suddenly the app works lightning fast, all animations and everything in 120Hz :exploding_head:.

melvin-bot[bot] commented 1 year ago

@alex-mechler @dylanexpensify @0xmiroslav 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 @0xmiroslav is eligible for the Internal assigner, not assigning anyone new.

dylanexpensify commented 1 year ago

@alex-mechler lmk what ETA we have for squashing this now that it's internal!

Expensify / App