From 4cf0923cd3523ecf792750afb2f686501c4af760 Mon Sep 17 00:00:00 2001 From: Linh Vo Date: Tue, 28 Jan 2025 08:11:30 +0700 Subject: [PATCH 1/2] fix: pause lottie animation on mweb to prevent memory leak --- src/components/Lottie/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index a6b1374b1c8f9..974fa60979f24 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -9,6 +9,7 @@ import useAppState from '@hooks/useAppState'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; +import {isMobile} from '@libs/Browser'; import isSideModalNavigator from '@libs/Navigation/isSideModalNavigator'; import CONST from '@src/CONST'; import {useSplashScreenStateContext} from '@src/SplashScreenStateContext'; @@ -74,7 +75,7 @@ function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props const unsubscribeNavigationBlur = navigator.addListener('blur', () => { const state = navigationContainerRef.getRootState(); const targetRouteName = state?.routes?.[state?.index ?? 0]?.name; - if (!isSideModalNavigator(targetRouteName)) { + if (!isSideModalNavigator(targetRouteName) || isMobile()) { setHasNavigatedAway(true); } }); From 82d5a6b075cd9d7f54e9bf326fae9fd095e9562c Mon Sep 17 00:00:00 2001 From: Linh Vo Date: Tue, 28 Jan 2025 08:15:54 +0700 Subject: [PATCH 2/2] fix: eslint fail --- src/components/Lottie/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Lottie/index.tsx b/src/components/Lottie/index.tsx index 974fa60979f24..9fb61ea99f754 100644 --- a/src/components/Lottie/index.tsx +++ b/src/components/Lottie/index.tsx @@ -8,8 +8,7 @@ import type DotLottieAnimation from '@components/LottieAnimations/types'; import useAppState from '@hooks/useAppState'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as Browser from '@libs/Browser'; -import {isMobile} from '@libs/Browser'; +import {getBrowser, isMobile} from '@libs/Browser'; import isSideModalNavigator from '@libs/Navigation/isSideModalNavigator'; import CONST from '@src/CONST'; import {useSplashScreenStateContext} from '@src/SplashScreenStateContext'; @@ -52,7 +51,7 @@ function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props const aspectRatioStyle = styles.aspectRatioLottie(source); - const browser = Browser.getBrowser(); + const browser = getBrowser(); const [hasNavigatedAway, setHasNavigatedAway] = React.useState(false); const navigationContainerRef = useContext(NavigationContainerRefContext); const navigator = useContext(NavigationContext);