[HOLD for payment 2023-04-03] [$1000] Implement the skeleton UI for the LHN.

[kavimuru]

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:

sign in to the app

Expected Result:

the skeleton UI appears and then is replaced by the reports / normal LHN

Actual Result:

you’ll see a blank screen, and on my iPhone 14 Pro the FAB appears as barely visible in the top right of the screen

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Feature request was posted in slack couple weeks ago. Was waiting for reproduction. Then I captured screenshot with slow 3G

Expensify/Expensify Issue URL:
Issue reported by: @roryabraham
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1666890950340499

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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 - @aimane-chnaif (External)

[melvin-bot]

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

[s77rt]

When you sign-in you will get a spinner not a blank page, and I think this is the expected behaviour. Not sure what's the problem here

[melvin-bot]

Auto-assign attempt failed, all eligible assignees are OOO.

[roryabraham]

Tagging in design for precise mockups.

[roryabraham]

When you sign-in you will get a spinner not a blank page, and I think this is the expected behaviour. Not sure what's the problem here

We have a "skeleton UI" component that shows a skeleton of UI components, and that's our preferred UI pattern over a full-screen loading spinner. This is technically a new feature, not a bug (though I'd argue it just implements our established best practice on another important screen). I'm sure that the distinction will become clear once we have mockups. However, let's all be patient here because @shawnborton is currently our only designer, and this issue might not be as urgent as others he may be assigned to.

[aimane-chnaif]

There are 3 cases after login and before loading LHN:

1. full loading page

2. LHN and Report detail page is displayed and all are blank

3. LHN and Report detail page is displayed and only FAB icon shows on LHN

on my iPhone 14 Pro the FAB appears as barely visible in the top right of the screen

I am not able to reproduce now but I have ever experienced this in the past on my iPhone
@roryabraham It would be helpful if you can add screenshot after reproduction

[shawnborton]

To clarify, would we get rid of the full page loading spinner in lieu of just showing skeleton UI components?

[shawnborton]

As far as the mockup goes, I guess we'd have something like this?

[roryabraham]

Yep, that looks great!

[greg-schroeder]

Internal: https://www.upwork.com/ab/applicants/1592391200735019008/job-details
External: https://www.upwork.com/jobs/~019f615859c41324f3

[JmillsExpensify]

To clarify, would we get rid of the full page loading spinner in lieu of just showing skeleton UI components?

Great question. Why wouldn't we replace the spinner with the skeleton UI more broadly? It seems like a pretty good change all around, and in fact, we're also doing this in RHP as well.

[roryabraham]

Why wouldn't we replace the spinner with the skeleton UI more broadly?

I think we should – that's what this issue is all about. But we can just take it step-by-step

[shawnborton]

I commented in the other issue but I feel like the skeleton loader makes sense when we are about to load messages or chats. Alternatively, we could create a skeleton that mimics the exact layout of each page that we need to load. So for instance, if we need to load the workspace page, we could have a skeleton that looks like the big avatar image, plus some text, plus option rows.

[roryabraham]

Alternatively, we could create a skeleton that mimics the exact layout of each page that we need to load

Love this idea

[JmillsExpensify]

Yeah, I love that as well. Eventually. It does feel more like a polish initiative though.

[MelvinBot]

@shawnborton, @greg-schroeder, @roryabraham, @bernhardoj, @aimane-chnaif Still overdue 6 days?! Let's take care of this!

[aimane-chnaif]

Waiting for PR review again from @roryabraham. Almost close

[MelvinBot]

@shawnborton, @greg-schroeder, @roryabraham, @bernhardoj, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@shawnborton, @greg-schroeder, @roryabraham, @bernhardoj, @aimane-chnaif Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[aimane-chnaif]

This is not a regression Melvin (#16495 (comment))

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.89-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• New skeleton loader for LHN #14456

If no regressions arise, payment will be issued on 2023-04-03. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[greg-schroeder]

Restarting the discussion here as this issue is nearing completion and the payment deadline is next week - where do we land as far as payment on this issue considering the timeline? Thoughts @roryabraham @JmillsExpensify @aimane-chnaif?

[greg-schroeder]

Bump above ☝️

@roryabraham @JmillsExpensify @aimane-chnaif

[aimane-chnaif]

We agreed flatten fee for enough reasoning so no need to consider PR merge timeline.
Given time spent and efforts on PR, we'd like to request compensation increase.
@roryabraham what do you think is fair amount? or want us to suggest?

[greg-schroeder]

I'm not really sure what amount makes the most sense, maybe @shawnborton or @roryabraham you have an idea?

[shawnborton]

I'm not sure either, so curious what @roryabraham thinks.

[roryabraham]

Oh yeah, this was a doozy. I think $4K seems reasonable for this job. @aimane-chnaif @bernhardoj do you agree?

[aimane-chnaif]

I agree.

[bernhardoj]

Sounds fair to me 👍.

[greg-schroeder]

Okay, I'll draft up offers for that amount! Thanks for weighing in everyone.

[greg-schroeder]

Issued offers to @bernhardoj and @aimane-chnaif for $4k flat 👍

[greg-schroeder]

Paid, job closed.