[HOLD for payment 2024-02-22] [$500] iOS - Login - The splash screen glitches and flashes on launch

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.26.1
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 the iOS app
Kill the app and launch it again

Expected Result:

The splash screen transition should be smooth on launch

Actual Result:

The splash screen glitches and flashes on launch

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6345929_1705533269315.Splash_screen_2.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01782ced06468ec4f5
Upwork Job ID: 1747794137711603712
Last Price Increase: 2024-01-18
Automatic offers:

aimane-chnaif | Reviewer | 28121977
ikevin127 | Contributor | 28121978

Job added to Upwork: https://www.upwork.com/jobs/~01782ced06468ec4f5

@garrettmknight

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

@0xmiroslav

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

#wave9-collect-signup

Proposal

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

The splash screen hide animation glitches on app launch.

What is the root cause of that problem?

PR #30905 implemented expo-image for rendering of the SVG background image which made the loading process heavier than before when we used react-native-fast-image.

On this issue there are 2 things on the SignInPageLayout which cause the splash screen hide animation glitch - I will list them in order of severity:

The BackgroundImage which on iOS .../BackgroundImage/index.ios.js uses Image from expo-image to load the background image - a large SVG file of ~800kb.

home-background--mobile-new.svg

The .../SignInPageContent/SignInHeroImage.js which is the Lottie Hands animation.

Both of these are being rendered while the .../SplashScreenHider/index.native.tsx component's onLayout calls the splash screen hide function and the callback animates out 2 properties (opacity and scale) of the splash screen background and expensify logo.

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

TLDR: Use isSplashHidden from SplashScreenHiddenContext to prevent the rendering of both iOS BackgroundImage and SignInHeroImage Lottie animation until the splash screen is hidden.

Pseudo code:

For .../BackgroundImage/index.ios.js we will show it with a smooth 750ms animation as soon as the splash hides:

check if !isSplashHidden is true and return; in order to prevent the Image rendering (which causes the issue)
below, wrap the Image with Reanimated.View, passing the same styles as Image + animatedStyle
add onLoadEnd prop to the Image where we pass the function that will trigger the animation

this way when isSplashHidden becomes true and the SVG finished loading, it will animate-in nicely.

For .../SplashScreenHider/index.native.tsx we will render an empty View with the Lottie component's styles so that the layout doesn't jump when the actual Lottie component is rendered:

check if !isSplashHidden is true and return the empty View with the Lottie component's styles - by doing this we prevent the rendering of the Lottie component (which causes the issue)

this way when isSplashHidden becomes true only then we render the Lottie component that will display the Hands animation.

Videos (included slow motion)

iOS: Native

Screen.Recording.2024-01-19.at.02.03.38.mov

slow motion

Screen.Recording.2024-01-19.at.02.03.38.mp4

@0xmiroslav

@0xmiroslav what do you think of this first proposal?

@aimane-chnaif

📣 @aimane-chnaif 🎉 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

@ikevin127

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

@aimane-chnaif

PR #35185 ready for review! 🚀

cc @aimane-chnaif

@garrettmknight

Looks like the automation might've failed to set the 7-day hold for payment since the PR #35185 (comment) was deployed to production ~4 hours ago 🧐

Hold for payment date should be:
2024-02-22

cc @garrettmknight

Looks like all automations were failed in this deploy cycle

Paid!

@aimane-chnaif

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:

[@aimane-chnaif] The PR that introduced the bug has been identified. Link to the PR:
[@aimane-chnaif] 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:
[@aimane-chnaif] 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:
[@aimane-chnaif] Determine if we should create a regression test for this bug.
[@aimane-chnaif] 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.
[@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@aimane-chnaif

@aimane-chnaif can you complete the checklist when you get a chance?

This is polish rather than bug. And no offending PR, always existed.
Not worth adding regression test. And also caught by QA team. If the bug happens again, easily noticeable on app launch.

Navigation Menu

Repository navigation

[HOLD for payment 2024-02-22] [$500] iOS - Login - The splash screen glitches and flashes on launch #34696

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?

Videos (included slow motion)

19 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[HOLD for payment 2024-02-22] [$500] iOS - Login - The splash screen glitches and flashes on launch #34696

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 18, 2024

melvin-bot commented on Jan 18, 2024

melvin-bot commented on Jan 18, 2024

lanitochka17 commented on Jan 18, 2024

ikevin127 commented on Jan 19, 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?

Videos (included slow motion)

garrettmknight commented on Jan 22, 2024

19 remaining items

melvin-bot commented on Jan 25, 2024

melvin-bot commented on Jan 25, 2024

ikevin127 commented on Jan 25, 2024

ikevin127 commented on Feb 15, 2024

aimane-chnaif commented on Feb 15, 2024

garrettmknight commented on Feb 22, 2024

garrettmknight commented on Feb 22, 2024

garrettmknight commented on Feb 22, 2024

aimane-chnaif commented on Feb 22, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions