[HOLD for payment 2024-08-01] [$50] Group chat - Avatar loads infinitely when refreshing full screen avatar on confirmation page

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.10-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

. Go to staging.new.expensify.com
2. Go to FAB > Start chat > Chat
3. Select a few users
4. Proceed to confirmation page
5. Add a group chat avatar
5. On confirmation page, click on the group chat avatar
6. Click View avatar
7. Refresh the page

Expected Result:

Avatar will load after refreshing the page

Actual Result:

Avatar loads infinitely when refreshing full screen avatar on confirmation page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6547681_1721434123139.gorup_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0163f99f868835a727
• Upwork Job ID: 1814779353535476997
• Last Price Increase: 2024-07-23
• Automatic offers:
• Ahmed-Abdella | Contributor | 103224976

Issue Owner

Current Issue Owner: @RachCHopkins

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @carlosmiceli (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

We think that this bug might be related to #vip-vsp

[mountiny]

@mollfpr @b4s36t4 This one seems related to your PR #44702 can you please confirm if revert fixes it?

[mountiny]

Not fixed by the revert, going to mark this as external

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0163f99f868835a727

[melvin-bot]

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

[mountiny]

In you proposals, you must include the offending PR. If you can highlight which PR caused it without a fix for the bug (the fix is a revert) a partial $50 reward will go your way

[Ahmed-Abdella]

@mountiny ther is no option to view the group image in the confirm page in production so it looks like this come from this PR #41586 that add a feature to view a group chat custom avatar.

Also I noticed a behaviour : If you wait for some time before viewing the image it works fine and display the image after the first refresh. Check the video below. ( but it doesn't work if you refresh it for one more time )

screen-recording-2024-07-21-at-35250-am_JjkYRvqv.mp4

So I think what happened is that:
After refreshing the page the app trying trying to fetch the image from the backend, but it seems that it didn't get uploaded yet so the file is not found. When I try with a small size image and wait for sometime before veiwing the image it works because the image has been uploaded.

And here is the error message from the console.

The not found file message

[Ahmed-Abdella]

Not Completely sure, but I think the same PR also cause this issue #45842. I mentioned the PR there too.

[gijoe0295]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Avatar loads infinitely when refreshing full screen avatar on confirmation page

What is the root cause of that problem?

The image uploaded while creating group is optimistically saved locally in the form of blob URI. The blob data would be cleared once we refresh the page. As the result, console would throw ERR_FILE_NOT_FOUND and the attachment view modal would show loading:

App/src/components/ImageView/index.tsx

Line 240 in 5a2602c

{isLoading && (!isOffline || isLocalFile) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}

and the group avatar in confirmation RHP would be reset to default.

Normally for an image to be uploaded to the CDN, we need to call the corresponding update avatar API and the BE will handle the upload. We haven't had any approaches solving the case of optimistic image data.

Offending PR: This has happened ever since we allowed viewing the custom avatar in full screen while creating group in #41586.

What changes do you think we should make in order to solve the problem?

We should not allow View photo option if the image uri indicates a local file FileUtils.isLocalFile(url):

App/src/components/AvatarWithImagePicker.tsx

Line 337 in f3a8f73

if (!isUsingDefaultAvatar) {

Or we can revert the shouldDisableViewPhoto that had been removed in #41586 and use in in NewChatConfirmationPage.

[s77rt]

cc @nexarvo Can you check this one 👀

[NaveedShaikh78]

I saw this issue in Upwork. I tried the same step but now it is not reproducible, is it fix or still reproducible ?

[melvin-bot]

📣 @NaveedShaikh78! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[NaveedShaikh78]

Is it still reproducible?

[tsa321]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Avatar spinner shown when refreshing full screen avatar page and on new group chat confirmation page

What is the root cause of that problem?

PR #41586 enables viewing group avatar in full screen. When user creates new group, the data is stored in onyx newChatDraft, but the avatar is stored as blob uri string. The blob uri string won't be available when the user refresh the app.

What changes do you think we should make in order to solve the problem?

We could store the avatar image as base64 string in onyx and use it in new/chat/confirm page.
If we need to fix this issue quickly, I have made a draft PR.

[melvin-bot]

Triggered auto assignment to @RachCHopkins (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

📣 @Ahmed-Abdella 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[mountiny]

Yeah $50 to @Ahmed-Abdella

[Ahmed-Abdella]

Offer accepted, Thanks @mountiny

[melvin-bot]

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

[melvin-bot]

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

• [CP Staging] Revert "Add support for viewing full screen Group Chat custom avatars" #45863

If no regressions arise, payment will be issued on 2024-08-01. 🎊

For reference, here are some details about the assignees on this issue:

• @s77rt requires payment through NewDot Manual Requests
• @Ahmed-Abdella requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@s77rt] The PR that introduced the bug has been identified. Link to the PR:
• [@s77rt] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@s77rt] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@s77rt] Determine if we should create a regression test for this bug.
• [@s77rt] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@RachCHopkins] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[s77rt]

No checklist needed ^ Offending PR has been reverted

[carlosmiceli]

Can we close this?

[s77rt]

@carlosmiceli, @Ahmed-Abdella is due payment for finding offending PR

[carlosmiceli]

Understood!

[melvin-bot]

@carlosmiceli, @s77rt, @RachCHopkins, @mountiny, @Ahmed-Abdella Eep! 4 days overdue now. Issues have feelings too...

[RachCHopkins]

I'm here Melvin! Sorry, busy week last week!

[mountiny]

Summary $50 to @Ahmed-Abdella for help with this deploy blocker and finding the offending PR.

As we have reverted the offending change the checklist can be skipped

[RachCHopkins]

Payment Summary:

Contributor: @Ahmed-Abdella paid $50 via Upwork

[RachCHopkins]

Contributor has been paid, the contract has been completed, and the Upwork post has been closed.