Scroll performance on Profile screen on Android
frncs-eu opened this issue · comments
Describe the bug
When inside the profile screen, at least on my device (Xiaomi MI 9 SE) the UI stutters visibly while rendering the LoadLatestBtn.
What's weird: this happens on this device only (tried on Pixel 7 Emu and not able to repro) and exactly on the profile page (no visible stutter in home/feeds page or in notification screen, despite the logic for showing/hiding the button being identical)
To Reproduce
Steps to reproduce the behavior:
- Go to the profile page on an Android device
- Scroll until the button to go back to top is visible
- Notice the lag
Expected behavior
The scroll should be smooth
Screenshots
(video)
| Default behavior (on prod build from Play store) | Expected (on dev build, read below) |
|---|---|
signal-2024-06-08-153633.mp4 |
signal-2024-06-08-153741.mp4 |
Details
- Platform: Android
- Platform version: 14 (LineageOS)
- App version: 1.185.1
Additional context
I explored the relevant logic here and experimented a bit, and I think the problem is with useMinimalShellMode creating and exporting the animatedStyle used by LoadLatestBtn together with other animatedStyles?
Apparently I managed to make it behave by exporting fabMinimalShellTransform from a dedicated hook instead of useMinimalShellMode.
This in theory avoids creating and returning all of the transforms altogether from the useMinimalShellMode hook, but I'm not very familiar with how Reanimated's useAnimatedStyle works under the hood and why this should impact performance on mid/low end devices.
Also, this doesn't explain why I can reproduce it ONLY on the Profile screen...
Default behaviour (React DevTools profiler, dev mode):
Separating the animatedStyle creation (React DevTools profiler, dev mode):
oh yeah great find. do you want to PR?
Yes, very happy to!