-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
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
Prevent Lottie from running in the background after navigating to other pages #48444
Conversation
src/components/Lottie/index.tsx
Outdated
// Prevent the animation from running in the background after navigating to other pages. | ||
// See https://github.com/Expensify/App/issues/47273 | ||
useEffect(() => { | ||
if (!navigationContainerRef || !navigator) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should check navigationRef.isReady() before access getState
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
d0cd731
to
3bc4b18
Compare
@suneox It seems that the current approach has fixed the regression, so using Screenshots/Videos |
TY, I'll start checking now |
src/components/Lottie/index.tsx
Outdated
const unsubscribeNavigationBlur = navigator.addListener('blur', () => { | ||
const state = navigationContainerRef.getRootState(); | ||
const targetRouteName = state?.routes?.[state?.index ?? 0]?.name; | ||
if (targetRouteName !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if (targetRouteName !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { | |
if (![NAVIGATORS.RIGHT_MODAL_NAVIGATOR, NAVIGATORS.LEFT_MODAL_NAVIGATOR].includes(targetRouteName)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That will be better. Thanks for pointing it out!
const navigator = useContext(NavigationContext); | ||
|
||
useEffect(() => { | ||
if (!browser || !navigationContainerRef || !navigator) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need to check browser?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because the issue only occurs in browsers, it seems unnecessary to apply this fix to native platforms.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, let change the PR status
@QichenZhu The change looks good. We can update the status based on the suggestions above, and I have a question related to using the browser. |
@dangrous Sorry, but I'm not sure why Melvin involved you here. |
No worries - looks like this should be reviewed by @aldo-expensify ? |
Hi @dangrous I’ll be working on this PR |
ah @QichenZhu it looks like you just linked the PR like I'm removing myself for now, this should correctly assign @aldo-expensify when ready. |
Reviewer Checklist
Screenshots/VideosAndroid: NativeScreen.Recording.2024-09-11.at.01.03.26.mp4Android: mWeb ChromeScreen.Recording.2024-09-11.at.00.57.57.mp4iOS: NativeScreen.Recording.2024-09-11.at.00.59.29.mp4iOS: mWeb SafariScreen.Recording.2024-09-11.at.00.55.08.mp4MacOS: Chrome / SafariScreen.Recording.2024-09-11.at.00.51.34.mp4MacOS: DesktopScreen.Recording.2024-09-11.at.00.52.48.mp4 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. I’ve verified this issue along with the regression issue.
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Details
Fixed Issues
$ #47273
PROPOSAL: #47273 (comment)
Tests
Expected result: The animation in the Settings tab should work, and the right-side modal should open.
Offline tests
Expected result: The animation in the Settings tab should work, and the right-side modal should open.
QA Steps
Expected result: The animation in the Settings tab should work, and the right-side modal should open.
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
android-native.mp4
Android: mWeb Chrome
android-web.mp4
iOS: Native
ios-native.mp4
iOS: mWeb Safari
ios-web.mp4
MacOS: Chrome / Safari
mac-web.mp4
MacOS: Desktop
mac-desktop.mov