[HOLD for payment 2023-04-03] [HOLD for payment 2022-08-11] [$500] Web - Chat - Avatar icon is flickers when the message is sent for the first time

[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. Go to https://staging.new.expensify.com/
2. Log in with any account
3. Select any chat
4. Send the message to the user

Expected Result:

There should not be any flickering of avatar icon

Actual Result:

Avatar icon is blinking when message sent for the first time

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1.67.0

Reproducible in staging?: Y

Reproducible in production?: Y

Email or phone of affected tester (no customers): applausetester+0901abb@applause.expensifail.com / Feya87Katya

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Bug5586718_Recording__493.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause internal team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[NikkiWines]

Hmm @kavimuru I'm unable to reproduce this on staging v1.1.67-0. Does the flickering happen consistently each time?

Screen.Recording.2022-05-26.at.09.51.18.mov

[kavimuru]

@NikkiWines I am able to reproduce with my account applausetester+km1@applause.expensifail.com / Test1234

Recording.292.mp4

[NikkiWines]

Ah ok, I was able to reproduce if I had an existing message in the conversation. Some update reproduction steps would be

1. Log into an account on New Expensify
2. Navigate to a chat where you were the last person to send a message
3. Send a message in that chat
4. Confirm that the avatar on the left hand side of the message that you just sent flickers.

This looks like a good external issue. Thanks for your help in clarifying things @kavimuru

[melvin-bot]

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

[melvin-bot]

Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@NicMendonca Eep! 4 days overdue now. Issues have feelings too...

[NicMendonca]

Opps, sorry for missing this!

Upwork job post: https://www.upwork.com/jobs/~01e452c0b62be21308

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (Exported)

[stitesExpensify]

To confirm @b1tjoy you were never hired on upwork? If that is the case @NicMendonca can we make sure the upwork link is correct, and make a new job if necessary?

[stitesExpensify]

This issue has already been solved and the solution was merged 6 days ago

[melvin-bot]

📣 @b1tjoy You have been assigned to this job by @stitesExpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

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

• fix: prevent avatar icon from flicker on Web #9995

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

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[NicMendonca]

@b1tjoy @rushatgabhane invited you to the new job 👍

[NicMendonca]

bump @b1tjoy @rushatgabhane can you accept the offer please?

[rushatgabhane]

accepted, thanks

[NicMendonca]

paid 🎉 thanks!

[kidroca]

If we don't use cache, the internal state of Image first init to IDLE, and then move to LOADING or LOADED.

This is a react-native-web bug, because in the past the Image took care of cache automatically, and would not initialize to IDLE for an Image that was already rendered

The bug was introduced to react-native-web when the Image component was refactored from class based to hooks based component

Here's the original logic that was later removed and introduced the bug

Images were automatically added to cache on load:
https://github.com/Expensify/react-native-web/blob/a7ab961d95de892e4b41c96ea945aa344fd49e50/packages/react-native-web/src/exports/Image/index.js#L361

Or during lifecycle methods
https://github.com/Expensify/react-native-web/blob/a7ab961d95de892e4b41c96ea945aa344fd49e50/packages/react-native-web/src/exports/Image/index.js#L174-L178

This was ensuring that if an image was loaded previously it would not start from the IDLE state if we render the same or a new component with the same image

---

Reported the bug upstream, here

• Adding already rendered image has a small flicker necolas/react-native-web#2492

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

• fix: prevent avatar icon from flicker on Web #9995

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