App
App copied to clipboard
Expensify
[$250] Web - IOU - Infinite blinking when open IOU detail page that is submited to someone
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: 1.4.65-0 Reproducible in staging?: y Reproducible in production?: y Issue reported by: Applause - Internal Team
Action Performed:
Recondition: log in with gmail account
- Open your self DM chat
- Track a new expense. Wait until the concierge message shows up
- Choose Submit it to someone
- Select gmail account and click Submit
- Open IOU detail page
Expected Result:
Detail page should open and no blinking should appear
Actual Result:
Infinite blinking when open IOU detail page that is submitted to someone
Workaround:
n/a
Platforms:
Which of our officially supported platforms is this issue occurring on?
- [ ] Android: Native
- [ ] Android: mWeb Chrome
- [ ] iOS: Native
- [ ] iOS: mWeb Safari
- [x] MacOS: Chrome / Safari
- [ ] MacOS: Desktop
Screenshots/Videos
Add any screenshot/video evidence
https://github.com/Expensify/App/assets/93399543/bda3f8e3-d288-465a-9d19-f617254eda5f
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~01c63ad2d7a4a81a9b
- Upwork Job ID: 1783959452840280064
- Last Price Increase: 2024-04-26
Triggered auto assignment to @twisterdotcom (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.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
@twisterdotcom 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.
This is wild, just endless OpenReport or GetNewerActions calls:
https://github.com/Expensify/App/assets/9133401/6b4c0f8a-5948-4077-a398-bbff34e5bad8
Feels pretty critical @quinthar
Job added to Upwork: https://www.upwork.com/jobs/~01c63ad2d7a4a81a9b
Triggered auto assignment to Contributor-plus team member for initial proposal review - @alitoshmatov (External)
@gedu, @s77rt, @shahinyan11 and @janicduplessis - is this related to these issues:
- https://github.com/Expensify/App/issues/39674
- https://github.com/Expensify/App/issues/40995
I think it could be a dupe, but this is in the Track flow, so perhaps it differs?
Proposal
Please re-state the problem that we are trying to solve in this issue.
Web - IOU - Infinite blinking when open IOU detail page that is submited to someone
What is the root cause of that problem?
The root cause is the line - Report.openReport(reportID, reportActionID); in function openReportIfNecessary(). Even though it is the line that causes blinking, the more important part is the useEffect with empty indices that calles this function if there is no reportActionID, which in this case is true. ReportActionID is being undefinded, after which the function openReportIfNecessary is called, where the line mentioned above causes the component to re-mount - executing the useEffect again, and again, and again.
What changes do you think we should make in order to solve the problem?
To solve the problem of the flickering screen due to the repeated execution of useEffect and remounting of the component, we should implement a solution that breaks the cycle of dependency between the report loading and the component's lifecycle. Here are the recommended changes:
- Improve Conditions: Update openReportIfNecessary to check for more statements before calling openReport. This prevents repeated fetching and rerendering.
- Optimize useEffect: Add necessary dependencies like reportID or reportActionID to useEffect to ensure it triggers only when needed, preventing unintended remounts.
By implementing these straightforward steps, we aim to stabilize the component behavior, reduce unnecessary rerenders, and improve user experience.
What alternative solutions did you explore? (Optional)
- Track Report Loading: Introduce a boolean state or ref to keep track of whether the report has already been opened. This prevents unnecessary repeated invocations of Report.openReport.
This is wild, just endless
OpenReportorGetNewerActionscalls:40931.mp4 Feels pretty critical @quinthar
There is another useEffect causing that problem. While not directly linked to the previously mentioned useEffect, it also triggers the OpenReport function multiple times on its own.
@Nuka02 Can you provide exact solutions I am not sure how exactly you are going to improve conditions, and optimize useEffect
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@twisterdotcom, @alitoshmatov Huh... This is 4 days overdue. Who can take care of this?
@twisterdotcom @alitoshmatov 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!
@twisterdotcom, @alitoshmatov 6 days overdue. This is scarier than being forced to listen to Vogon poetry!
I will check this shortly. Even though I thought I had fixed the bug, I am having a problem reproducing the issue.
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@twisterdotcom, @alitoshmatov 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!