[$250] Android - Account settings - Account settings page flickers if scrolled down when switching

@kadiealexander

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.4.62-0
Reproducible in staging?: y
Issue reported by: Applause - Internal Team

Action Performed:

Open the app and log in
Tap the avatar to open the account settings
Scroll down
Switch to the chat view and then back to the account settings

Expected Result:

No flickering when switching to the account settings

Actual Result:

The account settings page flickers when switching from the chat view to the account settings

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6444931_1712775349947.video_2024-04-10_14-55-23.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~012e7bc890a6659ad9
Upwork Job ID: 1778466370921259008
Last Price Increase: 2024-04-11
Automatic offers:

bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @kadiealexander

@arosiclair

Triggered auto assignment to @arosiclair (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

We think that this bug might be related to #vip-vsb

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

It isn't that critical, but if we can locate a fix before it hits PR we should try and do that. Leaving the blocker label for now

@arosiclair

Current assignee @arosiclair is eligible for the DeployBlockerCash assigner, not assigning anyone new.

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Proposal

Please re-state the problem that we are trying to solve in this issue.

The account page looks like flickering when scrolling to the bottom and reopen it.

What is the root cause of that problem?

When we reopen the page, we scroll to the last scroll positinon.

App/src/pages/settings/InitialSettingsPage.tsx

Lines 466 to 473 in 9e10604

    
           const onLayout = useCallback(() => { 
        
               const scrollOffset = getScrollOffset(route); 
        
               setIsAfterOnLayout(true); 
        
               if (!scrollOffset || !scrollViewRef.current) { 
        
                   return; 
        
               } 
        
               scrollViewRef.current.scrollTo({y: scrollOffset, animated: false}); 
        
           }, [getScrollOffset, route]);

We do this in onLayout of the scroll view. But it could be a bit late, so we could see the top of the page for a brief moment, so we add a margin top here.

App/src/pages/settings/InitialSettingsPage.tsx

Lines 489 to 490 in 9e10604

    
           // We use marginTop to prevent glitching on the initial frame that renders before scrollTo. 
        
           contentContainerStyle={[!isAfterOnLayout && !!scrollOffset && {marginTop: -scrollOffset}]}

However, the margin top will still be applied until isAfterOnLayout state is updated which takes time too, so we see the blink.

What changes do you think we should make in order to solve the problem?

Do the scroll inside useLayoutEffect.

useLayoutEffect(() => {
    const scrollOffset = getScrollOffset(route);
    if (!scrollOffset || !scrollViewRef.current) {
        return;
    }
    scrollViewRef.current.scrollTo({y: scrollOffset, animated: false});
}, [])

And we don't need the margin top anymore.

App/src/pages/settings/InitialSettingsPage.tsx

Lines 489 to 490 in 9e10604

    
           // We use marginTop to prevent glitching on the initial frame that renders before scrollTo. 
        
           contentContainerStyle={[!isAfterOnLayout && !!scrollOffset && {marginTop: -scrollOffset}]}

This is super minor I'm just gonna remove the label. Don't think it's worth spending the energy rushing a fix out.

@arosiclair

This issue has not been updated in over 15 days. @arosiclair, @allroundexperts, @bernhardoj, @kadiealexander eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

@kadiealexander

Not sure what the deal with the automations is. This hit production two weeks ago. @kadiealexander can you handle payment?

@bernhardoj

Payouts due:

Contributor: $250 @bernhardoj
Contributor+: $250 @allroundexperts

Upwork job is here.

@allroundexperts

@allroundexperts do you get paid via Upwork?

@arosiclair

@arosiclair @allroundexperts @bernhardoj @kadiealexander this issue is now 4 weeks old, please consider:

Finding a contributor to fix the bug
Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

Nops. I get paid through ND!

@allroundexperts

$250 approved for @allroundexperts

Navigation Menu

Repository navigation

[$250] Android - Account settings - Account settings page flickers if scrolled down when switching #40034

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

Please 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?

23 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const onLayout = useCallback(() => {
	const scrollOffset = getScrollOffset(route);
	setIsAfterOnLayout(true);
	if (!scrollOffset \|\| !scrollViewRef.current) {
	return;
	}
	scrollViewRef.current.scrollTo({y: scrollOffset, animated: false});
	}, [getScrollOffset, route]);

	// We use marginTop to prevent glitching on the initial frame that renders before scrollTo.
	contentContainerStyle={[!isAfterOnLayout && !!scrollOffset && {marginTop: -scrollOffset}]}

[$250] Android - Account settings - Account settings page flickers if scrolled down when switching #40034

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 10, 2024

kbecciv commented on Apr 10, 2024

github-actions commented on Apr 10, 2024

Julesssss commented on Apr 11, 2024

melvin-bot commented on Apr 11, 2024

github-actions commented on Apr 11, 2024

bernhardoj commented on Apr 11, 2024

Proposal

Please 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?

arosiclair commented on Apr 11, 2024

23 remaining items

melvin-bot commented on May 7, 2024

arosiclair commented on May 7, 2024

kadiealexander commented on May 8, 2024

kadiealexander commented on May 8, 2024

melvin-bot commented on May 8, 2024

allroundexperts commented on May 9, 2024

JmillsExpensify commented on Jun 28, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions