[$500] Chat - Attachment page keeps on loading infinitely.

[kbecciv]

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: 1.4.34.0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Tap on a report
3. Tap plus icon near compose
4. Tap Add attachment
5. Take a picture using camera and send it
6. Turn off mobile data
7. Open the attachment

Expected Result:

Attachment page must show the image and must not load infinitely.

Actual Result:

Attachment page keeps on loading infinitely.

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

Bug6362671_1706724667975.full_video.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019f92fc532944b2e5
• Upwork Job ID: 1752760607717834752
• Last Price Increase: 2024-03-14
• Automatic offers:
• situchan | Reviewer | 0
• FitseTLT | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~019f92fc532944b2e5

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[Yokomon]

@kbecciv Please check recent changes. I can't send attachments to reproduce this issue.

[Amoralchik]

Proposal

Hi there,

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

Clearly define the nature of "fallbackSource" in AttachmentView to address the current issue.

What is the root cause of that problem?

The problem arises from the undefined nature of "fallbackSource" in AttachmentView.

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

Implement a mechanism to display informative error messages to users when the "fallbackSource" is undefined. This enhancement aims to provide clarity in the event of an error, thus improving the overall user experience.

What alternative solutions did you explore? (Optional)

Uploading images to memory and subsequently hashing them after a successful upload. This approach ensures that the "fallbackSource" is always defined.

---

FYI example:

1. Discord displays an Error
2. Telegram display hires quality images from storage

[melvin-bot]

📣 @Amoralchik! 📣
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>

[Amoralchik]

@kbecciv Please check recent changes. I can't send attachments to reproduce this issue.

I believe you can reproduce the issue on any device by following these steps

1. Upload any image
2. Immediately disconnect your internet connection after success
3. open the image

This results in an infinite loading state.

FYI: I am using "version": "1.4.34-1".

[Amoralchik]

Contributor details
Your Expensify account email: vitaliipivenwork@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/vitaliip17

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[lschurr]

Could you review @situchan?

[situchan]

@Amoralchik thanks for the proposal. The root cause doesn't make sense to me. It's incorrect.

[situchan]

We're waiting proposals

[Amoralchik]

@situchan Let me try once again.

I propose adding a setBothSourceError function and incorporating it into the onError handler of AttachmentViewImage. This function will set bothSourceError to true if both source and fallbackSource return errors.

App/src/components/Attachments/AttachmentView/index.js

Lines 171 to 190 in 554276f

	if (isImage || (file && Str.isImage(file.name))) {
	return (
	<AttachmentViewImage
	url={imageError ? fallbackSource : source}
	file={file}
	isAuthTokenRequired={isAuthTokenRequired}
	loadComplete={loadComplete}
	isFocused={isFocused}
	isUsedInCarousel={isUsedInCarousel}
	isSingleCarouselItem={isSingleCarouselItem}
	carouselItemIndex={carouselItemIndex}
	carouselActiveItemIndex={carouselActiveItemIndex}
	isImage={isImage}
	onPress={onPress}
	onError={() => {
	setImageError(true);
	}}
	/>
	);
	}

       onError={() => {
            setImageError(true);
            if (imageError) setBothSourceError(true);
        }}

After this, we can add a check for allSourceError in the if (!bothSourceError || isImage || (file && Str.isImage(file.name))) condition, and then include:

    else if (bothSourceError) return (
        <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>
            Unexpected error, please try again later
        </Text>
    );

This way, if both source and fallbackSource are absent in ONYX or return errors, we can display an error message instead of getting stuck in an infinite loading loop.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[lschurr]

Could you review this again @situchan?

[situchan]

@Amoralchik sorry but your latest comment still doesn't explain the root cause correctly.
For proposals to be accepted, both root cause and solution should be correctly provided.

Still looking for proposals

[melvin-bot]

@lschurr @situchan this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[FitseTLT]

It will be ready for review by EOD

[lschurr]

Any change @FitseTLT?

[FitseTLT]

PR ready for review

[mallenexpensify]

PR still being actively worked on #39290 (comment)

[melvin-bot]

This issue has not been updated in over 15 days. @LLPeckham, @marcochavezf, @mollfpr, @lschurr, @FitseTLT eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[mallenexpensify]

So close to merging...
#39290 (comment)

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[iwiznia]

FYI I think this PR caused a regression, see: #42316 (comment)

[FitseTLT]

FYI I think this PR caused a regression, see: #42316 (comment)

It is not a regression but rather a missed edge case for a single/ios native platform.

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[FitseTLT]

@mvtglobally This issue is a fixed one; only payment is left to be processed. 👍

[mvtglobally]

Issue not reproducible during KI retests. (Third week)

[lschurr]

Looks like the automation failed on this one and the PR was merged on May 22nd.

I'll update and add a payment summary shortly.

[lschurr]

Payment summary:

• Contributor: @FitseTLT $500 (paid in Upwork)
• Contributor+: @mollfpr $500 (requires payment through NewDot Manual Requests)

[lschurr]

Closing :)

[garrettmknight]

$500 approved for @mollfpr