Skip to content

Fix login page blinking on launch #46947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MariaHCD merged 1 commit into from
Aug 8, 2024
Merged

Fix login page blinking on launch #46947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions src/components/Lottie/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {View} from 'react-native';
import type DotLottieAnimation from '@components/LottieAnimations/types';
import useAppState from '@hooks/useAppState';
import useNetwork from '@hooks/useNetwork';
import useSplashScreen from '@hooks/useSplashScreen';
import useThemeStyles from '@hooks/useThemeStyles';

type Props = {
Expand All @@ -14,6 +15,7 @@ type Props = {

function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieView>) {
const appState = useAppState();
const {isSplashHidden} = useSplashScreen();
const styles = useThemeStyles();
const [isError, setIsError] = React.useState(false);

Expand All @@ -27,14 +29,15 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie

const aspectRatioStyle = styles.aspectRatioLottie(source);

// If the image fails to load or app is in background state, we'll just render an empty view
// using the fallback in case of a Lottie error or appState.isBackground to prevent
// memory leak, see issue: https://github.com/Expensify/App/issues/36645
if (isError || appState.isBackground) {
// If the image fails to load, app is in background state, animation file isn't ready, or the splash screen isn't hidden yet,
// we'll just render an empty view as the fallback to prevent
// 1. memory leak, see issue: https://github.com/Expensify/App/issues/36645
// 2. heavy rendering, see issue: https://github.com/Expensify/App/issues/34696
if (isError || appState.isBackground || !animationFile || !isSplashHidden) {
return <View style={[aspectRatioStyle, props.style]} />;
}

return animationFile ? (
return (
<LottieView
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
Expand All @@ -44,7 +47,7 @@ function Lottie({source, webStyle, ...props}: Props, ref: ForwardedRef<LottieVie
webStyle={{...aspectRatioStyle, ...webStyle}}
onAnimationFailure={() => setIsError(true)}
/>
) : null;
);
}

Lottie.displayName = 'Lottie';
Expand Down
10 changes: 0 additions & 10 deletions src/pages/signin/SignInPageLayout/SignInHeroImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React, {useMemo} from 'react';
import {View} from 'react-native';
import Lottie from '@components/Lottie';
import LottieAnimations from '@components/LottieAnimations';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useSplashScreen from '@hooks/useSplashScreen';
import useThemeStyles from '@hooks/useThemeStyles';
import variables from '@styles/variables';

Expand All @@ -24,14 +22,6 @@ function SignInHeroImage() {
};
}, [shouldUseNarrowLayout, isMediumScreenWidth]);

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}
Expand Down