[$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?

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] 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[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[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:

https://github.com/user-attachments/assets/e17ba1db-2fa0-4e21-a67e-de85e75a8d61

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[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[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[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[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[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 👍