-
Notifications
You must be signed in to change notification settings - Fork 3k
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
[$250] Android - LHN flickers when scrolled down and switching between Search and Inbox #53605
Comments
Triggered auto assignment to @slafortune ( |
🚨 Edited by proposal-police: This proposal was edited at 2025-01-20 02:48:25 UTC. 🚨 Edited by proposal-police: This proposal was edited at 2024-12-27 11:25:11 UTC. Edited by proposal-police: This proposal was edited at 2024-12-27 11:25:11 UTC. ProposalPlease re-state the problem that we are trying to solve in this issue.
What is the root cause of that problem?
What changes do you think we should make in order to solve the problem?
1. Store the index of the currently first visible item
via the
2. Display a skeleton loader if the first visible item has not been rendered yet
3. Remove the skeleton loader once the first visible item is rendered
Function
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?What alternative solutions did you explore? (Optional)
ResultScreen.Recording.2024-12-27.at.18.25.49.mov |
ProposalPlease re-state the problem that we are trying to solve in this issue.The problem occurs when switching between the "Search" and "Inbox" tabs in the LHN (Left-Hand Navigation) while the list is scrolled down. The LHN flickers, creating a poor user experience. LHN flickering occurs due to:
What is the root cause of that problem?
What changes do you think we should make in order to solve the problem?Updates
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?
What alternative solutions did you explore? (Optional)
|
I am not able to reproduce this - reached out to C+ here Screen_Recording_20241205_145204_New.Expensify.mp4 |
This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989 |
@slafortune You can try the below steps to reproduce the bug:
|
@slafortune Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
@slafortune Eep! 4 days overdue now. Issues have feelings too... |
Alright - thank, I was able to recreate this now. |
Job added to Upwork: https://www.upwork.com/jobs/~021867321297737486613 |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @hungvu193 ( |
@slafortune, @hungvu193 Whoops! This issue is 2 days overdue. Let's get this updated quick! |
Not overdue |
@truph01 Can you provide more details on your solution? Maybe a test branch so I can test it? |
@hungvu193 The test branch here |
Hi, I am Michael (Mykhailo) from Callstack, an expert agency and I can work on this issue. |
Working on the issue. |
I can confirm the bug is replicable. |
My investigations:
Video
Test.mp4
|
There is a useful prop of FlashList - initialScrollIndex. I am testing to implement it. |
@rezkiy37 I’ve already tried using this prop, but occasionally an empty screen is displayed, as noted here. I’m not sure how you’re using it, but if you’ve encountered the same bug, we’re on the same page. |
@rezkiy37 that is my suggestion |
Still in progress |
Proposal updated
|
I take your comments into account, appreciate it 🙂 |
I am preparing a proposal. |
|
ProposalPlease re-state the problem that we are trying to solve in this issue.The problem occurs when opening the "Inbox" tab during switching between the tabs. The LHN flickers. It rerenders. Moreover, it does not always restore the previous scroll position. What is the root cause of that problem?FlashList rerenders during scrolling to the previous position or even stays at the top. What changes do you think we should make in order to solve the problem?I am proposing to add one more important property to FlashList - estimatedListSize. It allows FlashList to avoid auto-measuring by setting static values. They say:
const {windowHeight, windowWidth} = useWindowDimensions();
const listHeight = windowHeight - variables.bottomTabHeight;
....
<FlashList
...
estimatedListSize={{
height: listHeight,
width: windowWidth,
}}
/> I can easily obtain the window dimensions and the defined tab height. I understand that the header height is dynamic, but I don’t see any issue if the list height is slightly larger than the actual. Considering that getting the header height could be an overhead, I believe this is a reasonable compromise. Additionally, it resolves an issue related to restoring the previous scroll position. It now functions flawlessly. I've attached a couple of videos to demonstrate the difference ⬇️ Video before
Before.mp4Video after
After.mp4What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?
What alternative solutions did you explore? (Optional)Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job. N/A |
Thanks for the update @rezkiy37, I'll take a look 👀 |
I've opened #55486 for review. |
Triggered auto assignment to @puneetlath, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
I am going to work on a follow-up to find a web solution. |
Working on the issue today. |
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Version Number: 9.0.71-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team
Action Performed:
Expected Result:
LHN will not flicker when scrolled down and switching between Search and Inbox
Actual Result:
LHN flickers when scrolled down and switching between Search and Inbox
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
Bug6684654_1733343491984.Screen_Recording_20241205_041553_Expensify.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @hungvu193The text was updated successfully, but these errors were encountered: