[HOLD for payment 2024-04-09] [$500] [MEDIUM] IOU - Money request page displays skeleton in online

lanitochka17 commented 8 months 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:

Launch app
Tap profile icon
Tap Preferences
Toggle on force offline
Navigate back to LHN
Tap IOU report for request money received
Note the IOU report page keeps loading
Tap Pay elsewhere
Navigate back to LHN and again visit IOU to note page keeps loading
Navigate to LHN
Tap profile
Tap preferences
Toggle off force offline
Navigate back to LHN
Tap IOU report

Expected Result:

Output of @mountiny & I discussing this one here for reference.

We have the report total loaded in the iouReport data, so we should show the report total in the report where possible when offline. -The iouActions we can't load would still show with a skeleton UI as we do today (we agreed just the one request preview component appearing as a skeleton is fine). When a new request is added to the request when offline and appears at 50% opacity in the pending create state, so should the report total in the expanded header area.

Actual Result:

In online, in IOU report for request money, the page keeps on loading

Workaround:

Unknown

Platforms:

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

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

Version Number: 1.3.60-1

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://github.com/Expensify/App/assets/78819774/b3257238-8c59-4e60-a84b-8dce2d6bc3cf

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/~012efb1896a46c34c4
Upwork Job ID: 1707346943173816320
Last Price Increase: 2024-02-13
Automatic offers:

abdulrahuman5196 | Reviewer | 0
dukenv0307 | Contributor | 0

Issue Owner

Current Issue Owner: @trjExpensify

melvin-bot[bot] commented 8 months ago

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

melvin-bot[bot] commented 8 months 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

trjExpensify commented 8 months ago

When I come back online, they eventually load and the skeleton UI goes away, so that's contrary to the bug report. When we can't load the content, the skeleton UI is the correct pattern to use.

https://github.com/Expensify/App/assets/16232057/6fb31b6d-d28b-4081-8a81-8d573e56d31e

I'm curious why the report total extended header in the iouReport isn't available to view offline in the first place though, and whether we can improve that in the spirit of offline-first?

CC: @mountiny @luacmartins @JmillsExpensify

luacmartins commented 8 months ago

It seems like a regression. I agree they should be working offline.

mountiny commented 8 months ago

I'm curious why the report total extended header in the iouReport isn't available to view offline in the first place though, and whether we can improve that in the spirit of offline-first?

Yep I think in offline it can work like that, online we probably still need to show the skeleton

trjExpensify commented 8 months ago

Can you expand on that, @mountiny? Why do we need to show the skeleton for the report total when online?

mountiny commented 8 months ago

No we dont have to, sorry we were probably talking about different things

trjExpensify commented 8 months ago

Cool, so we agree with the below? Then next question, is this going to need backend changes?

Expected results The report total in the expanded header area should be available to view when offline.

Actual Results The report total doesn't load, and shows a skeleton UI in its place when offline.

mountiny commented 8 months ago

The report total in the expanded header area should be available to view when offline.

What if you have exisitng IOU report and you sign out sign back in, you dont go to the IOU report so you dont have the report actions but you have the total.

You are offline, You request more, the total is updated and you see that offline made request but you dont see the previosu messages and there is no indication the report has more report actions while total is more. Is that fine as a feedback to the user while offline?

trjExpensify commented 8 months ago

You might have to type that out again in steps for me to follow it completely sorry man. Let's park this and focus on the deploy for a sec.

trjExpensify commented 8 months ago

Okaaaay. @mountiny, circling back here. Mind rephrasing? 😄

mountiny commented 8 months ago

You fresh sign in
you have the IOU report data and its total ($50) locally with user B
You go offline
you request more money $10 from the user B
We wont show a skeleton, one report action done optimistically with $10 and total of $60

If there is no skeleton, then it might be confusing to the user as there is only one report action and they cannot see the others

trjExpensify commented 8 months ago

Why wouldn't it just work like this as it does now? 😕

https://github.com/Expensify/App/assets/16232057/791508b9-a114-488f-b254-6f6c7fdc9a53

Interestingly, the report total updates as well. Perhaps that should be at 50% opacity as well though, as it's pending the update? CC: @JmillsExpensify @shawnborton

shawnborton commented 8 months ago

Yeah, I think that makes sense to me.

mountiny commented 8 months ago

@trjExpensify In this case you have visited the report before you went offline so you had the £50 report action. You could not have that if you would sig in and not open the report and went offline and then go to the report.

Its edge case but thats what we trying to cover here

trjExpensify commented 8 months ago

I don't think I did visit the iouReport, no. Here's another one:

https://github.com/Expensify/App/assets/16232057/5914c142-4882-452d-864d-53715bef47f6

mountiny commented 8 months ago

@trjExpensify yeah but you just created it locally so the request is there. You would have to create the request and report, then sign out and sign back in, request from global create from the same person, the historical report actions will be missing I believe because they do not load during openApp

melvin-bot[bot] commented 8 months ago

@trjExpensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

melvin-bot[bot] commented 8 months ago

@trjExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

trjExpensify commented 8 months ago

Going to chat with Vit about this on Monday.

melvin-bot[bot] commented 8 months ago

@trjExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

trjExpensify commented 8 months ago

@mountiny let's chat about this tomorrow!

melvin-bot[bot] commented 8 months ago

@trjExpensify this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

melvin-bot[bot] commented 7 months ago

@trjExpensify Eep! 4 days overdue now. Issues have feelings too...

mountiny commented 7 months ago

Made this one weekly, dont think its daily priority

melvin-bot[bot] commented 7 months ago

@trjExpensify this issue is now 4 weeks old and preventing us from maintaining WAQ. This should now be your highest priority. Please post below what your plan is to get a PR in review ASAP. Thanks!

melvin-bot[bot] commented 7 months ago

Job added to Upwork: https://www.upwork.com/jobs/~012efb1896a46c34c4

melvin-bot[bot] commented 7 months ago

Triggered auto assignment to Contributor Plus for review of internal employee PR - @abdulrahuman5196 (Internal)

abdulrahuman5196 commented 7 months ago

@trjExpensify I am not sure on the plan of this issue? Is someone going to pick up this issue internally?

trjExpensify commented 7 months ago

Yeah, I can't reproduce the OP of this issue, so it's not a bug as reported. I did stumble on something else that Vit and I are talking about above that may or may not need BE changes if we do something about it.

Things we agree on so far we should change:

When you're offline and add a request to a report, the reportTotal should also be at 50% opacity to signal that it's pending, just like the request added to the report that's displayed at 50% opacity.

Outstanding to work through:

why the report header should show an infinite loading skeleton UI when offline in some case that I'm trying to repro that Vit mentioned above

melvin-bot[bot] commented 7 months ago

@trjExpensify, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

trjExpensify commented 7 months ago

No change.

melvin-bot[bot] commented 7 months ago

@trjExpensify, @abdulrahuman5196 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

trjExpensify commented 7 months ago

Maybe Vit and I can talk about this in one of the 42 threads tomorrow!

melvin-bot[bot] commented 7 months ago

@trjExpensify, @abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?

trjExpensify commented 7 months ago

Set a NewDot task to bug us, melv.

melvin-bot[bot] commented 6 months ago

@trjExpensify, @abdulrahuman5196 Eep! 4 days overdue now. Issues have feelings too...

trjExpensify commented 6 months ago

Okay, Vit and I caught up. To summarise...

We have the report total loaded in the iouReport data, so we should show it in the report where possible when offline
The iouActions we can't load would still show with a skeleton UI as we do today
When a new request is added to the request when offline and appears at 50% opacity in the pending create state, so should the report total in the expanded header area

To illustrate that, here's a view of:

Offline, opening a report where you can't load all the iouActions
Offline, adding a new request to the report where the request and the report total appear at 50% opacity
coming back online, all the iou actions loading and the pending actions reverting to 100% opacity

melvin-bot[bot] commented 6 months ago

@trjExpensify, @abdulrahuman5196 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

trjExpensify commented 6 months ago

@mountiny confirming you agree with the accuracy of the above summary? If so, I think we can move this on.

mountiny commented 6 months ago

Yeah I agree with this, I am just not 100% sure we will know the number of the request. The report preview should have the child request count number so we should be able to, but I think if we cannot do that we should just show one preview skeleton for consistency, otherwise we can move this forwards

trjExpensify commented 6 months ago

Ah, are you saying in the report view above the loaded iouAction and beneath the loaded report total the whole area is a skeleton versus just the request preview card of each iouAction that hasn't loaded?

mountiny commented 6 months ago

Ah, are you saying in the report view above the loaded iouAction and beneath the loaded report total the whole area is a skeleton versus just the request preview card of each iouAction that hasn't loaded?

No, what I meant is that we should either show skeletons of the previews exactly based on the number of requests we know which are in the report, which I believe we should know,

or if we cannot, we should always just show one report preview card skeleton, not more.

Maybe the second version where we only show one report preview card skeleton no matter how many requests there might be in the report might be better as that will enable us to always show the total as well and will be consistent and at the same time will be more performant then showing potentially many skeletons

trjExpensify commented 6 months ago

So many skellies! Okay, got it. Yeah, I think my preference (performance pending) is to show skeletons of the previews exactly based on the number of requests. Otherwise, you kind of think there's just the one if we skelly one preview and not the area above the one loaded and beneath the report total header area.

mountiny commented 6 months ago

Otherwise, you kind of think there's just the one if we skelly one preview and not the area above the one loaded and beneath the report total header area.

Is that important though? I think its fine to just show one, we are not indicating in any way there might be comments in between either

trjExpensify commented 6 months ago

Not sure how important it is, but it's a little inaccurate tis' all. It's a fine starting point and not worth a performance hit if that's the case.

mountiny commented 6 months ago

Sounds good!

trjExpensify commented 6 months ago

Perfecto, let's move this on to solicit proposals. Confirming it can go external, right?

mountiny commented 6 months ago

Yes

melvin-bot[bot] commented 6 months ago

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

Expensify / App