[$500] Android – Attachment – App flickering when uploading a long image to a conversation

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.30-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:

Open New Expensify app
Log in with the account
Open any chat
On a conversation, click on the + button in the compose box
Upload long image to a conversation

Expected Result:

Preview of the image is displayed before uploading to the conversation

Actual Result:

App flickering when uploading a long image to a conversation in preview. Flashes on first boot

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6352453_1706038657902.App_flickering_when_uploading_a_long_image.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~011d877180b69b96f5
Upwork Job ID: 1749885428346445824
Last Price Increase: 2024-01-30
Automatic offers:

jjcoffee | Reviewer | 28132224
ZhenjaHorbach | Contributor | 28132225

Job added to Upwork: https://www.upwork.com/jobs/~011d877180b69b96f5

@greg-schroeder

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

@jjcoffee

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

Proposal

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

Android – Attachment – App flickering when uploading a long image to a conversation

What is the root cause of that problem?

The main problem with the issue is that when we load a long photo we call onLoad a few times ( But according to the documentation, onLoad should only call once, which means the image is completely loaded )

App/src/components/Lightbox.js

Lines 185 to 189 in 6cfdd6f

    
           onLoad={(e) => { 
        
               const width = (e.nativeEvent?.width || 0) * PixelRatio.get(); 
        
               const height = (e.nativeEvent?.height || 0) * PixelRatio.get(); 
        
               setImageDimensions({...imageDimensions, lightboxSize: {width, height}}); 
        
           }}

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

To fix this issue we can update the code and add new condition which will prevent unnecessary onLoad calls. For this we can use isLightboxLoaded

                                    onLoad={(e) => {
                                        if (isLightboxLoaded) {
                                            return;
                                        }

                                        const width = (e.nativeEvent?.width || 0) * PixelRatio.get();
                                        const height = (e.nativeEvent?.height || 0) * PixelRatio.get();
                                        setImageDimensions({...imageDimensions, lightboxSize: {width, height}});
                                    }}

What alternative solutions did you explore? (Optional)

NA

Reviewing tomorrow!

@ZhenjaHorbach

@ZhenjaHorbach Thanks for the proposal! The RCA feels a bit underdeveloped; I'm curious why onLoad is being called multiple times if it's only supposed to be called once. I also wonder if this is device specific?

@lanitochka17 Could you update/add which platforms this affects?

The issue is only reproducible on Android

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

@ZhenjaHorbach

Thanks for the extra detail! Happy to go with @ZhenjaHorbach's proposal here. The RCA seems correct that we're simply calling onLoad multiple times on Android (for some reason with different sizes), and the solution makes sense for that.

🎀👀🎀 C+ reviewed

@Julesssss

Triggered auto assignment to @Julesssss, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

@jjcoffee

📣 @jjcoffee 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

@ZhenjaHorbach

📣 @ZhenjaHorbach 🎉 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 📖

@ZhenjaHorbach

📣 @ZhenjaHorbach 🎉 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 📖

PR will be ready today or tomorrow

@jjcoffee

@jjcoffee

App/src/components/Lightbox/index.tsx

Lines 82 to 91 in a058e3b

    
           const updateContentSize = useCallback( 
        
               ({nativeEvent: {width, height}}: ImageOnLoadEvent) => { 
        
                   if (contentSize !== undefined) { 
        
                       return; 
        
                   } 
        
                   setContentSize({width: width * PixelRatio.get(), height: height * PixelRatio.get()}); 
        
               }, 
        
               [contentSize, setContentSize], 
        
           );

It seems this problem is no longer relevant after refactoring the code into this PR
#33756

In fact, the fix is already used here

@ZhenjaHorbach

@ZhenjaHorbach Thanks for flagging! Did you verify that the issue is fixed?

I couldn't reproduce it on the last main )

Great! Closing this then.

Navigation Menu

Repository navigation

[$500] Android – Attachment – App flickering when uploading a long image to a conversation #34998

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	onLoad={(e) => {
	const width = (e.nativeEvent?.width \|\| 0) * PixelRatio.get();
	const height = (e.nativeEvent?.height \|\| 0) * PixelRatio.get();
	setImageDimensions({...imageDimensions, lightboxSize: {width, height}});
	}}

	const updateContentSize = useCallback(
	({nativeEvent: {width, height}}: ImageOnLoadEvent) => {
	if (contentSize !== undefined) {
	return;
	}

	setContentSize({width: width * PixelRatio.get(), height: height * PixelRatio.get()});
	},
	[contentSize, setContentSize],
	);

[$500] Android – Attachment – App flickering when uploading a long image to a conversation #34998

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 23, 2024

melvin-bot commented on Jan 23, 2024

melvin-bot commented on Jan 23, 2024

ZhenjaHorbach commented on Jan 24, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

jjcoffee commented on Jan 25, 2024

jjcoffee commented on Jan 29, 2024

1 remaining item

lanitochka17 commented on Jan 30, 2024

melvin-bot commented on Jan 30, 2024

jjcoffee commented on Jan 31, 2024

melvin-bot commented on Jan 31, 2024

melvin-bot commented on Jan 31, 2024

melvin-bot commented on Jan 31, 2024

ZhenjaHorbach commented on Jan 31, 2024

ZhenjaHorbach commented on Jan 31, 2024

jjcoffee commented on Feb 1, 2024

ZhenjaHorbach commented on Feb 1, 2024

greg-schroeder commented on Feb 2, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions