[HOLD #12603][Image][Performance] Avatars appear grey as they're loaded from server for common mobile flows - reported by @sobitneupane

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

1. Open the mobile app
2. Click Request Money from Global Create (green + button)
3. Enter any amount
4. On the next screen, notice how the color of the avatar for recent contacts starts grey, and as we re-render, the actual avatars/list appears.

Note: If you check the linked conversation, then it's also easy to see that this happens in the IOU preview component. You can also reproduce this on most mobile flows. I was able to do the same with Send Money as well as New Chat.

Expected Result:

Avatars are saved locally and don't re-render for our most common mobile flows, let alone your most frequently used contact.

Actual Result:

Recent avatars start out as grey since that's all we have locally, and after being downloaded from the server, the actual default avatar appears

Workaround:

None

Platform:

Where is this issue occurring?

• iOS
• mWeb
• Web

Version Number: 1.2.9-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

RPReplay_Final1664482772.mov

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

View all open jobs on GitHub

[melvin-bot]

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

[JmillsExpensify]

Hmm, these reproduction steps are pretty hard to follow. I'm not seeing any greyness in the video. In fact the original report was a different flow. It was appearing in the IOU preview component.

[JmillsExpensify]

That said, I would imagine that the reason the greyness is happening in the Request Money flow as well as the IOU preview component because we save no cached version locally, so all the avatars are constantly being re-rendered from the server. And specifically the reason that it's grey is that this is the skeleton UI color we fall back on.

[JmillsExpensify]

I'm going to update the video with one of my own so that the greyness is visible and more clear. I'm including a screenshot here for clarity.

[JmillsExpensify]

Likely related: #6527

[melvin-bot]

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

[JmillsExpensify]

Ok, I also discovered another way to reproduce this issue on Web (as well as mWeb). Reproduction steps for web

1. Open up a chat that has quite a bit of history
2. Start scrolling up quickly
3. At a certain point, you'll see the same issue. Avatars appear a dark gray, at which point they are eventually loaded.

I think this is a backend/performance issue, so I'm going to add the engineering label for more thoughts.