[$250] Android - Login – Login page blinks when open app

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.12-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: N/A
**Email or phone of affected tester (no customers):**[email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Sign out and kill the NewDot android app
2. Open the NewDot app
3. Take a note when login page opens

Expected Result:

App should not blink

Actual Result:

Login page blinks when open app

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

Bug6552998_1721934555623.Recording__3569.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014fc22ce9eab9144e
• Upwork Job ID: 1819152387493807005
• Last Price Increase: 2024-08-01
• Automatic offers:
• ikevin127 | Reviewer | 103430665

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

Triggered auto assignment to @kevinksullivan (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.

[lanitochka17]

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

[lanitochka17]

@kevinksullivan FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

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

Login page blinks in native.

What is the root cause of that problem?

The page blinks is caused by the sign in hand animation. In sign in hand animation, if the splash screen isn't hidden yet, we render a plain View with the same size as the lottie animation to prevent any jump because the sign in page is centered vertically..

App/src/pages/signin/SignInPageLayout/SignInHeroImage.tsx

Lines 27 to 43 in 8728fc0

	const {isSplashHidden} = useSplashScreen();
	// Prevents rendering of the Lottie animation until the splash screen is hidden
	// by returning an empty view of the same size as the animation.
	// See issue: https://github.com/Expensify/App/issues/34696
	if (!isSplashHidden) {
	return <View style={[styles.alignSelfCenter, imageSize]} />;
	}
	return (
	<Lottie
	source={LottieAnimations.Hands}
	loop
	autoPlay
	style={[styles.alignSelfCenter, imageSize]}
	webStyle={{...styles.alignSelfCenter, ...imageSize}}
	/>
	);

It was added in #35185 to improve the performance by delaying the lottie. When the splash screen is hidden, we start rendering the Lottie component. However, in Lottie component, we don't render the lottie animation immediately.

App/src/components/Lottie/index.tsx

Lines 37 to 47 in 8728fc0

	return animationFile ? (
	<LottieView
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	source={animationFile}
	ref={ref}
	style={[aspectRatioStyle, props.style]}
	webStyle={{...aspectRatioStyle, ...webStyle}}
	onAnimationFailure={() => setIsError(true)}
	/>
	) : null;

The animationFile value is undefined initially and will be set in the useEffect.

App/src/components/Lottie/index.tsx

Lines 22 to 26 in 8728fc0

	const [animationFile, setAnimationFile] = useState<string | AnimationObject | {uri: string}>();
	useEffect(() => {
	setAnimationFile(source.file);
	}, [setAnimationFile, source.file]);

It was added in #45211 to also improve the performance by delaying the lottie. But since we render nothing for a brief moment, the page moves down and up.

Placeholder view -> null -> Lottie

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

We need to return a placeholder view too when the animationFile isn't ready to prevent any jump. We already have that here

App/src/components/Lottie/index.tsx

Lines 33 to 35 in 8728fc0

	if (isError || appState.isBackground) {
	return <View style={[aspectRatioStyle, props.style]} />;
	}

so we just need to add || !animationFile to the existing condition.

I think we can also move the isSplashHidden condition to Lottie. Lmk if you agree!

What alternative solutions did you explore? (Optional)

Pass a new props to Lottie to set the animationFile immediately for sign in hand animation

OR

Wrap the Lottie with a View with the same size.

App/src/pages/signin/SignInPageLayout/SignInHeroImage.tsx

Lines 35 to 43 in 8728fc0

	return (
	<Lottie
	source={LottieAnimations.Hands}
	loop
	autoPlay
	style={[styles.alignSelfCenter, imageSize]}
	webStyle={{...styles.alignSelfCenter, ...imageSize}}
	/>
	);

[melvin-bot]

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

[melvin-bot]

@kevinksullivan Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014fc22ce9eab9144e

[melvin-bot]

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

[kevinksullivan]

asking about if this fits in newdot quality here

https://expensify.slack.com/archives/C05LX9D6E07/p1722554976014829

[ikevin127]

@bernhardoj's proposal looks good to me. The root cause was correctly identified and the main solution fixes the issue.

I think we can also move the isSplashHidden condition to Lottie. Lmk if you agree!

If you're talking about the isSplashHidden check from within the SignInHeroImage component I agree, I tested this and it makes sense to check all conditions in that one if within the Lottie component. Just make sure to adjust the comment above that if to explain the newly added conditions 👍

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[ikevin127]

cc @MariaHCD for final assignment review when you get a chance, thank you! 🧑‍💻

[melvin-bot]

📣 @ikevin127 🎉 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

[bernhardoj]

PR is ready

cc: @ikevin127

[ikevin127]

⚠️ Production deploy automation failed here -> this should've been paid on 2024-08-20 according to production deploy confirmed in #46947 (comment) and deploy checklist.

Payment was due yesterday!

cc @kevinksullivan @MariaHCD

[bernhardoj]

@kevinksullivan I think we need a payment summary here.

Requested in ND.

[JmillsExpensify]

Reporting for payment summary.

[kevinksullivan]

Summary

• @ikevin127 $250
• @bernhardoj $250

[JmillsExpensify]

$250 approved for @bernhardoj