[$250] [New feature] Formalize loading UX patterns

[MitchExpensify]

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

---

Version Number: v1.4.77-11
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): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/350373
Issue reported by: @flodnv
Slack conversation: Original proposal here: https://expensify.slack.com/archives/C01GTK53T8Q/p1699972596342559

Action Performed:

Find any loading state with skeleton view, ideally all the bigger loading states we have to replicate this

Expected Result:

A few random scenarios:

Actual Result:

Sometimes, the app is loading something for a little while; as an end user, you have no clue what's happening. Then, when loading finishes, sometimes several seconds later, all of a sudden, new data pops up and takes you by surprise, resulting in a very unpleasant UX that almost feels broken.

Workaround:

Wait for load to finish

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

See above in expected outcome.

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01abc617cb419429a0
• Upwork Job ID: 1802720967915457458
• Last Price Increase: 2024-07-29

Issue Owner

Current Issue Owner: @getusha

[melvin-bot]

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

[MitchExpensify]

I think we need:

1. Reproduction steps for long loads where skeleton view is shown
2. List of all situations where Some initial fixes and code style updates #1 happens to ensure our solution covers them

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01abc617cb419429a0

[melvin-bot]

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

[slafortune]

@getusha I haven't had a chance to dig into listing this out yet, but would be glad to team up with you on that.

[getusha]

@slafortune @MitchExpensify i am not able to see the expected result, could you attach it again please? thanks

[MitchExpensify]

Weird, can you see these @getusha ?

[melvin-bot]

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

[mananjadhav]

Just to chime in, I can't see the expected results either. But I can see screenshots uploaded by @MitchExpensify here. I am assuming @getusha should be able to see them too.

[getusha]

Just to chime in, I can't see the expected results either. But I can see screenshots uploaded by @MitchExpensify #43453 (comment). I am assuming @getusha should be able to see them too.

Yes, I am able to see the screenshots, thanks!

[melvin-bot]

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

[getusha]

Discussing here https://expensify.slack.com/archives/C01GTK53T8Q/p1699972596342559

[melvin-bot]

@slafortune @getusha 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!

[slafortune]

@getusha do you have an update?

[melvin-bot]

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

[getusha]

@slafortune Still discussing. i think the design team is working on it https://expensify.slack.com/archives/C01GTK53T8Q/p1699972596342559

cc @Expensify/design

[getusha]

Could we also get the animated mockup? i assume it'll behave different than a progress bar.

[dannymcclain]

Could we also get the animated mockup? i assume it'll behave different than a progress bar.

@dubielzyk-expensify what were you thinking? I kinda thought it would behave like a progress bar... But I can definitely see the argument for it just filling up over and over again until everything is loaded. Curious what you had in mind!

[shawnborton]

That was my initial thinking too, though I guess that presents some technical feasibility questions - can we reasonably know how long something is taking to load and show progress in a start to finish fashion? No idea how that works. Otherwise I guess we would do some kind of horizontal movement/pulsing, which also feels pretty standard for these sorts of things.

[flodnv]

Otherwise I guess we would do some kind of horizontal movement/pulsing

This is by far the easiest here 👍

[dannymcclain]

Cool - I'm down for that. That's pretty typical behavior for these kinds of loaders anyways. So I don't really think it's worth the effort to try to make it a realistic progress bar.

[dubielzyk-expensify]

Gonna take the animation of the loading bar internal and I'll report back here with final specs asap 👍

[melvin-bot]

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

[melvin-bot]

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

[getusha]

Not overdue, working on the design.

[dubielzyk-expensify]

Here's our stab at the animation we want:

CleanShot.2024-07-16.at.11.41.32.mp4

I've created a CodePen and it's the animation called Rubber Band or #loading1 in code. My code isn't the best so I'd urge us to optimize it rather than copy paste 😅

[melvin-bot]

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

[getusha]

@flodnv I think we should update the issue description and let an expert agency work on this.

[flodnv]

@slafortune @dubielzyk-expensify we should probably just create a new issue at this point, do you agree?

[melvin-bot]

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

[slafortune]

Yes - I think that would be more clear 👍 I probably won't get to it today - but can in the morning tomorrow.

[melvin-bot]

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

[dubielzyk-expensify]

@slafortune @dubielzyk-expensify we should probably just create a new issue at this point, do you agree?

SGTM

[melvin-bot]

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

[melvin-bot]

@slafortune, @getusha Still overdue 6 days?! Let's take care of this!

[getusha]

Not overdue, @slafortune will create a new issue for this!

[slafortune]

Sorry for my delay! New GH created 👍