[HOLD for payment 2022-08-11 - Reminder to add bonus] Add skeleton UI to chats

[mvtglobally]

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:

1. Open app
2. Make sure you are on a slow connection (e.g. 3G)
3. Open a new chat

Expected Result:

There should be some identifier that chat is loading

Actual Result:

Below image is the chat empty state when trying to load it on a bad connection. It'd be nice to put something in there while waiting

Workaround:

unknown

Platform:

Where is this issue occurring?

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

Version Number: 1.1.26-0
Reproducible in staging?: Y
Reproducible in production?:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

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

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @johncschuster (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[shawnborton]

Following this one, I'd love to mock something up for this.

[mananjadhav]

Are we planning to add a shimmering effect (as shown in the 2nd screenshot) or some placeholders here?

[johncschuster]

Is this feature request still in the planning phase? If so, I'm not sure it would be appropriate to triage this to engineering right now.

[puneetlath]

@johncschuster it seems like we have agreement in the slack thread to go forward with it.

[johncschuster]

Sweet! In that case, I shall triage the thing. Thanks, @puneetlath!

[MelvinBot]

Triggered auto assignment to @madmax330 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[madmax330]

@puneetlath have we decided on what the background should be? I.e do we already have the resources for it or does design need to come up with something first?

[puneetlath]

@shawnborton suggested going with a ghost UI like this in the slack thread.

@shawnborton do you feel good about going forward with that?

[shawnborton]

Yup! And then I like the idea of adding some kind of slight fading/pulsing effect to it.

[madmax330]

Cool do we already have that asset or does that need to be created as part of this issue? (just trying to determine if it can be marked as external or not)

[shawnborton]

I suppose they are just shapes, so perhaps we don't need assets and we can just create them using containers and styles? Otherwise we can provide all of these as .svgs. Maybe it just depends on the proposals we get - I suppose there are multiple ways to implement this (either by creating containers or using svgs) and I'm curious which way you think is best.

[mananjadhav]

I have one or two options to implement, waiting for this to go "External" before applying.

[madmax330]

I'm curious which way you think is best

I'm honestly not sure. But my guess would be svg, that way we're sure it'll render the same on all platforms. Not sure if making it with containers will have issue with different platforms.
That's just a shot in the dark though. I guess we'll mark it as external and see what the proposals are

[MelvinBot]

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

[stephanieelliott]

Shared to Upwork: https://www.upwork.com/jobs/~01a3b83272750b939a

[melvin-bot]

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

[stephanieelliott]

Hey @MitchExpensify, reassigning this as I am going OOO. To save you some scrolling, the PR for this one is #8042, most of the action is happening there now. Thank you!

[parasharrajat]

PR is almost done.

[melvin-bot]

@mananjadhav, @parasharrajat, @MitchExpensify, @Luke9389 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Luke9389]

Hmm, we shouldn't be seeing the Overdue message with the Reviewing label applied 🤔

[marcaaron]

also no Overdue label applied 🤔

[melvin-bot]

@mananjadhav, @parasharrajat, @MitchExpensify, @Luke9389 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

• feat: Added Skeleton UI to chats #8042

If no regressions arise, payment will be issued on 2022-08-11. 🎊

[mananjadhav]

@Luke9389 @marcaaron @parasharrajat I was wondering considering the effort put in the issue, is it possible to increase the budget on this?

[marcaaron]

Hmm I'm not sure. I see this:

If you think your compensation should be increased for a specific job, you can request a reevaluation by commenting in the Github issue where the Upwork job was posted.

In the doc, but not really clear to me what the process for re-evaluation. @mananjadhav can you maybe give us a brief summary with something like estimated total number of hours you spent working on this, why you feel the compensation should be increased, etc?

[mananjadhav]

Sure @marcaaron.

I don't have a specific total number of hours honestly. But I can explain the reasons behind the request.

1. Earlier we agreed to add the Skeleton UI only to the first load of the chat and not load more. So we ended up discussing and then agreeing to replace the logic with load more as well

2. I didn't factor any animation with the component, and had only added pulse animation to the chat load more. Getting the right animation required some back and forth and agreement across the team, which required some effort.

3. (this could partially be put on me as the delay was due to my unverified commit), but by the time we were ready to merge the PR, we changed the logic for the Onyx Keys handling for loading the reports and had to redo those changes as per the new format.

I hope this helps.

cc - @parasharrajat

[marcaaron]

I don't have a specific total number of hours honestly. But I can explain the reasons behind the request.

What areas would you say that spent "most of your time" working on? Can you break it down into chunks? Can you express each of these additional areas as a percentage of the total time you spent working?

[mananjadhav]

@marcaaron I went through some logs and here's an update if this helps.

1. Load More handling - Updates on the solution, code and work ~2-3 hours
2. Animation - This overall took maximum time, from two aspects. One was the actual implementation, second some trial and error on my end to figure our if each item can be put inline with the animation. ~6-8 hours.
3. Rework based on new Keys in Onyx 1 hour.

[marcaaron]

@mananjadhav thanks, just one more question, can you tell us what you feel is a fair compensation for this issue so we can review?

[mananjadhav]

what you feel is a fair compensation for this issue so we can review?

Thanks for the response @marcaaron. I feel it should be 1000$

[marcaaron]

@Luke9389 @MitchExpensify seems fair to me based on the scope of the job and seems like maybe it was priced a bit low from the beginning.

[MitchExpensify]

Cool, I'll add a $750 bonus when paying tomorrow.

[Luke9389]

I agree with that new total 👍

[MitchExpensify]

Paid!