-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
[CP Staging] Add freezeScreenWithLazyLoading function #44544
[CP Staging] Add freezeScreenWithLazyLoading function #44544
Conversation
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.
Suggested some renames
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪 |
RPReplay_Final1719501628.mp4tested and ios worked |
Reviewer Checklist
Screenshots/VideosAndroid: Nativeandroid-1.movandroid-2.movAndroid: mWeb Chromeandroid-web-1.movandroid-web-2.moviOS: Nativeios-1.movios-2.moviOS: mWeb Safariios-web-1.movios-web-2.movMacOS: Chrome / Safariweb-1.movweb-2.movMacOS: Desktopdesktop-2.movdesktop-1.mov |
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.
Changes look fine to me, but its not immediately obvious to me why not using the lazy component causes this issue. @WojtekBoman Can you provide more details in the PR description please?
The issue with the popover is also fixed https://github.com/Expensify/App/assets/36083550/e59ebbb1-0338-458b-a4d6-335915c83e01 |
I checked all platforms The only thing I noticed Update : This bug is also in main android-web-1.mov |
Same question |
Thanks! I am going to CP this to staging as its really annoying bug :D @ZhenjaHorbach what exactly is wrong in the video/ which second? |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Maybe I'm wrong and it's always been like this and that's normal But when we open report Flickering in the video is normal (I'm on the main 😅) 2024-06-27.18.27.51.mov |
…n-with-lazy-loading [CP Staging] Add freezeScreenWithLazyLoading function (cherry picked from commit 9d88c63)
Yeah I think we are tracking the orientation of the animations elsewhere. Its a bit tricky |
🚀 Cherry-picked to staging by https://github.com/mountiny in version: 9.0.2-4 🚀
@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes. |
🚀 Deployed to production by https://github.com/jasperhuangg in version: 9.0.3-7 🚀
|
🚀 Deployed to production by https://github.com/Julesssss in version: 9.0.5-13 🚀
|
export default function freezeScreenWithLazyLoading(lazyComponent: () => React.ComponentType) { | ||
return () => { | ||
const Component = lazyComponent(); | ||
return FrozenScreen(Component); | ||
}; | ||
} |
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.
This additional loading state caused #45152.
Since this function handles screen-level entities -> we'll re-mount entire screen. keyboard appear -> we re-mount screen -> we destroy composer -> we loose focus -> keyboard hides. When screen is mounted -> we retrieve input focus and we get infinite loop .
(Read the PR description for more details #45335)
Details
This PR fixes the issue with flickering central pane screens.
This issue was caused by invoking
withPrepareCentralPaneScreen
HOC multiple times inCENTRAL_PANE_SCREENS.tsx
.Previously, each screen in
CENTRAL_PANE_SCREENS
was stored as an arrow function that returns a lazily loaded component wrapped by a HOC, causing that HOC to be called multiple times. This HOC has now been refactoredto a higher order function that takes an arrow function as a parameter, this logic prevents unnecessary re-rendering screens.
Fixed Issues
$ #44419
$ #44498
PROPOSAL:
Tests
Offline tests
QA Steps
Same as tests
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
RPReplay_Final1719502379.mp4
Android: Native
Screen.Recording.2024-06-27.at.16.04.47.mov
Android: mWeb Chrome
Screen.Recording.2024-06-27.at.16.12.18.mov
iOS: Native
Screen.Recording.2024-06-27.at.16.23.05.mov
iOS: mWeb Safari
Screen.Recording.2024-06-27.at.16.14.11.mov
MacOS: Chrome / Safari
Screen.Recording.2024-06-27.at.16.07.17.mov
MacOS: Desktop
Screen.Recording.2024-06-27.at.16.04.09.mov