HOLD [$500] Web - IOU - When performing a split bill in a group, the skeleton view is stuck

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. First login to different accounts which two different users, one as user A and the other as user B
2. Create a group that includes user A and user B.
3. [user A] Start chat in the group.
4. Open the same group chat by both users A and B.
5. [user A] Click "plus sign" and select "Split bill".
6. [user A] Enter the amount, click Next button and Split button.

Expected Result:

Group members (User B) should see the split bill amount.

Actual Result:

For the User B, the skeleton view of this action item is stuck forever until the page is refreshed or a chat is switched.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.67.1
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

stuck-skeleton-bug.mp4

Recording.4403.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018574fb33c023d25e
• Upwork Job ID: 1701338078367494144
• Last Price Increase: 2023-09-18

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[paultsimura]

Proposal

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

While sending a "Split bill" request in a group, other participants see the SkeletonView stuck forever

What is the root cause of that problem?

When the Report is rendered on the User B side, the transaction is not yet processed, so it's not present in the BE response, and therefore – in Onyx. As a result, the transaction is {} – the default value.
This leads to the skeleton view being displayed without any report-related actions.

App/src/components/ReportActionItem/MoneyRequestPreview.js

Lines 240 to 242 in 1bad061

	{_.isEmpty(props.transaction) ? (
	<MoneyRequestSkeletonView />
	) : (

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

We should add the following hook inside the MoneyRequestPreview component:

const isTransactionPresent = !_.isEmpty(props.transaction);
useEffect(() => {
    if (isTransactionPresent) {
        return;
    }

    Report.openReport(props.chatReportID);
}, [isTransactionPresent, props.chatReportID]);

This will cause report re-fetch if a transaction is missing for the IOU Item. The dependencies of the hook will ensure it's triggered only once.
Such approach will lead to the skeleton view being visible for a few seconds only with the report being re-fetched immediately.

Result:

split_bill_skeleton.mp4

What alternative solutions did you explore? (Optional)

[kbecciv]

Proposal by: @paultsimura
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694182124123539

Proposal

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

While sending a "Split bill" request in a group, other participants see the SkeletonView stuck forever

What is the root cause of that problem?

When the Report is rendered on the User B side, the transaction is not yet processed, so it's not present in the BE response, and therefore – in Onyx.
This leads to the skeleton view being displayed without any report-related actions.

App/src/components/ReportActionItem/MoneyRequestPreview.js

Lines 240 to 242 in 1bad061

	{_.isEmpty(props.transaction) ? (
	<MoneyRequestSkeletonView />
	) : (

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

We should add the following hook inside the MoneyRequestPreview component:
const isTransactionPresent = !_.isEmpty(props.transaction);
useEffect(() => {
if (isTransactionPresent) {
return;
}

    Report.openReport(props.chatReportID);
}, [isTransactionPresent, props.chatReportID]);

This will cause report re-fetch if a transaction is missing for the IOU Item. The dependencies of the hook will ensure it's triggered only once.
Such approach will lead to the skeleton view being visible for a few seconds only with the report being re-fetched immediately.
Result:
https://github.com/Expensify/App/assets/12595293/a6f4562d-3dac-427a-99d6-37e182fd3f58

What alternative solutions did you explore? (Optional)

[pradeepmdk]

This is a pusher issue #26925 (comment)

pusher not sending the transcation_ details

[sonialiap]

not sure why it added me as External, I would make the worst C+ 😂 unassigning myself

[zanyrenney]

@pradeepmdk @eVoloshchak if this relates to pusher, can it still be external?

[melvin-bot]

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

[pradeepmdk]

@zanyrenney sorry for the delay. this could be internal only because this is a backend issue.

[zanyrenney]

Ah, okay thanks, I thought so.

[cead22]

Yes @zanyrenney that sounds great actually, otherwise I would make this weekly, and put it in the back burner, so please find somebody from split bill project, and thank you

[kbecciv]

Issue related #28713

[zanyrenney]

hey @youssef-lr based on this comment and suggestion here we decided that engineers should fix the bugs introduced by the sprint team.

I believe this one for bill split arose from wave 7 - and see a bunch of new issues from you for bill split - https://github.com/Expensify/Expensify/issues/322294 / https://expensify.slack.com/archives/C03SC9DVD/p1696512527374609

After discussing with @cead22 above, I think this one should be handled by the team who worked on bill split. Can you clarify if it's you or someone else on the team and reassign based on that please?

Let me know if you have any questions about this or I am missing context on this one. Thanks!

[zanyrenney]

Making weekly though for now as not an immediate priority.

[youssef-lr]

I thinnk I might have an idea why this is happening, I think the transaction of the split bill is not being sent through pusher but only the report action. This wasn't part of TeachersUnite but I'll be happy to keep this assigned to me!

[zanyrenney]

Thank you so much @youssef-lr ! That's really helpful. Appreciate you!

[zanyrenney]

Is there an easier way for future for me to check the change and trace it back if I got it wrong here, I'd like to develop a better process for future @youssef-lr

[youssef-lr]

Honestly things are moving so fast it's hard to keep up :D, I think the most straightforward way is to ask in Slack. You'll either get a reply from whoever is responsible for those code changes or they'll get mentioned by someone else in the thread. For example, whenever I see a bug or a discussion related to Tasks I mention Jack as I'm aware that he's been leading that project. Hope this is helpful! :)

[youssef-lr]

OK figured it out while working on https://github.com/Expensify/Expensify/issues/322304, turns out we don't send the split transaction from Auth. I'll create a PR this week.

[zanyrenney]

Thank you - that would be great!

[cead22]

Thank you both!

[youssef-lr]

Going to whip out a PR this week.

[melvin-bot]

This issue has not been updated in over 15 days. @eVoloshchak, @youssef-lr, @zanyrenney eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot]

@eVoloshchak, @youssef-lr, @zanyrenney, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.