[$250] Implement the skeleton UI for the LHN.

[kavimuru]

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:

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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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[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.

[roryabraham]

@JmillsExpensify let's bump the bounty for this issue up to $1000 to see if we can get some proposals coming in!

[roryabraham]

@CosminnB Overall that looks pretty good, but you lost me a bit with this statement:

As an add-on to the existing SkeletonViewLines component we can add a platform-specific condition as the react-content-loader library will not properly show the animation on web.

Can you expand on what you mean? And why that isn't a problem with our current implementation of the skeleton view for reports?

[aimane-chnaif]

I don't think this is correct design we're looking for. It's weird that left side shows skeleton, while right side doesn't show anything.

As explained in mockup @shawnborton attached here, show skeleton on both sides (LHN and Report page) until each of them are fully loaded

Please correct me if I am wrong cc: @roryabraham @shawnborton

[shawnborton]

Yeah, I think if we are loading a chat over in the main chat view, we should show the skeleton there too.

[melvin-bot[bot]]

@shawnborton, @greg-schroeder, @roryabraham, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[JmillsExpensify]

@JmillsExpensify let's bump the bounty for this issue up to $1000 to see if we can get some proposals coming in!

@roryabraham Do you want me to assign myself to this issue? I'll go ahead and bump it up to $1,000 though heads up that @greg-schroeder is the BZ member assigned. Happy to help though!

[aimane-chnaif]

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

@CosminnB your updated proposal still doesn't meet this requirement.

Here, I clearly explained each step to which skeleton views should be applied

[aimane-chnaif]

@CosminnB we have full page loading spinner after login, before loading main page. Please understand this first. (above screenshot is for Step 1)

[melvin-bot[bot]]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[aimane-chnaif]

@CosminnB The full loading page is 100% displayed every time for me. Please try with HT account.

https://user-images.githubusercontent.com/96077027/204366738-e1584fb3-b83f-4c33-99ed-753b861bbe35.mov

[aimane-chnaif]

my proposal removes it in favor of showing the skeleton

I don't see any code snippet in your proposal related to this.

[aimane-chnaif]

@CosminnB I followed and tested your updated proposal but still showing blank page on LHN instead of skeleton after login. To ensure that I am not missing anything from your proposal, can you create your branch and share link?

Also, next time, please post new proposal instead of editing previous (deprecated) proposal.

[roryabraham]

Sounds like we're still waiting for a functional proposal here