[$250] Android - LHN flickers when scrolled down and switching between Search and Inbox

[lanitochka17]

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: 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): applausetester+kh1311020@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch ND or hybrid app
2. Scroll down LHN list
3. Tap Search
4. Tap Inbox

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?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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

• Upwork Job URL: https://www.upwork.com/jobs/~021867321297737486613
• Upwork Job ID: 1867321297737486613
• Last Price Increase: 2025-01-09

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

Triggered auto assignment to @slafortune (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[truph01]

Edited by proposal-police: This proposal was edited at 2024-12-27 11:25:11 UTC.

Proposal

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

• LHN flickers when scrolled down and switching between Search and Inbox

What is the root cause of that problem?

• We have logic to scroll to the previous scroll position in:

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Line 254 in 0ff0cdf

flashListRef.current.scrollToOffset({offset});

• With a large list, during rapid scrolling, FlashList may encounter situations where it needs to render multiple items simultaneously to keep up with the fast-changing offsets, which can result in temporary blank spaces being visible.

• As a result, we can see the LHN flickers when going back from inbox.

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

• When on the sidebar screen, store the index of the first visible item as firstVisibleItemIndex. If the user navigates to another screen and then returns to the sidebar, display a skeleton loader if the item corresponding to firstVisibleItemIndex has not been rendered. Detailed steps are provided below:

1. Store the index of the currently first visible item

• In ScrollOffsetContextProvider, export two functions:

    // Saves the scroll offset of the first visible item for the given route.
    saveFirstVisibleIndex: (route: PlatformStackRouteProp<ParamListBase>, scrollOffset: number) => void;

    // Retrieves the previously saved scroll offset (first visible index) for the given route.
    getFirstVisibleIndex: (route: PlatformStackRouteProp<ParamListBase>) => number | undefined;

    const saveFirstVisibleIndex: ScrollOffsetContextValue['saveFirstVisibleIndex'] = useCallback((route, scrollOffset) => {
        firstVisibleIndexRef.current[getKey(route)] = scrollOffset;
    }, []);

    const getFirstVisibleIndex: ScrollOffsetContextValue['getFirstVisibleIndex'] = useCallback((route) => {
        if (!firstVisibleIndexRef.current) {
            return;
        }
        return firstVisibleIndexRef.current[getKey(route)];
    }, []);

via the contextValue.

• In LHNOptionsList add a function:

    const handleViewableItemsChanged = ({viewableItems}) => {
        if (viewableItems.length > 0) {
            const currentIndex = viewableItems[0].index; // Get the first visible item
            saveFirstVisibleIndex(route, currentIndex); // Save the index
        }
    };

• Update:

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Line 34 in e94df0f

const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext);

    const {saveScrollOffset, getScrollOffset, getFirstVisibleIndex, saveFirstVisibleIndex} = useContext(ScrollOffsetContext);
    const firstVisibleItem = useRef(getFirstVisibleIndex(route));

2. Display a skeleton loader if the first visible item has not been rendered yet

• In here introduce new state:

const [initialScrollIndexVisible, setInitialScrollIndexVisible] = useState(false);

• Update the condition to display skeleton:

App/src/pages/home/sidebar/SidebarLinks.tsx

Line 96 in e94df0f

{!!isLoading && optionListItems?.length === 0 && (

                {(!initialScrollIndexVisible || (!!isLoading && optionListItems?.length === 0)) && (

3. Remove the skeleton loader once the first visible item is rendered

• Update:

App/src/pages/home/sidebar/SidebarLinks.tsx

Line 87 in e94df0f

<LHNOptionsList

                    onInitialScrollIndexVisible={() => {
                        setInitialScrollIndexVisible(true);
                    }}

Function onInitialScrollIndexVisible will be triggered when the first visible item is rendered.

• Update the onLayout function:

                    onLayout={() => {
                        onLayoutItem();
                        if (Math.abs(index - (firstVisibleItem.current ?? 0)) < 15) {
                            onInitialScrollIndexVisible?.();
                        }
                    }}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

• We can update:

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Lines 242 to 256 in 0ff0cdf

	const onLayout = useCallback(() => {
	const offset = getScrollOffset(route);
	if (!(offset && flashListRef.current)) {
	return;
	}
	// We need to use requestAnimationFrame to make sure it will scroll properly on iOS.
	requestAnimationFrame(() => {
	if (!(offset && flashListRef.current)) {
	return;
	}
	flashListRef.current.scrollToOffset({offset});
	});
	}, [route, flashListRef, getScrollOffset]);

 const animatedScrollValue = useRef(new Animated.Value(0)).current;
    const onLayout = useCallback(() => {
        const offset = getScrollOffset(route);

        if (!(offset && flashListRef.current)) {
            return;
        }

        // Use Animated.timing to handle custom scroll duration
        Animated.timing(animatedScrollValue, {
            toValue: offset, // Target offset
            duration: 500, // Custom duration in milliseconds
            useNativeDriver: false, // Scrolling is not supported with native driver
        }).start();

        animatedScrollValue.addListener(({value}) => {
            // We need to use requestAnimationFrame to make sure it will scroll properly on iOS.
            requestAnimationFrame(() => {
                if (flashListRef.current) {
                    flashListRef.current.scrollToOffset({offset: value, animated: true});
                }
            });
        });
    }, [route, flashListRef, getScrollOffset]);

• This change will provide a smoother scrolling experience by increasing the duration, which will eliminate the flicker issue.

Result

Screen.Recording.2024-12-27.at.18.25.49.mov

[saifelance]

Proposal

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

1. Re-rendering: FlashList unmounts/remounts when switching tabs due to optionMode or data changes.
2. Scroll Position Restoration: Inefficient handling of offsets causes layout jitter.
3. Layout Recalculation: Style updates during tab switches alter visible areas.
4. Key/Item Size Issues: Incorrect estimatedItemSize or key management disrupts rendering.
5. Transition Timing: Asynchronous updates or animations destabilize layout.

What is the root cause of that problem?

1. Preserve Scroll Position: Ensure efficient offset handling and avoid redundant renders.
2. Minimize Re-renders: Use React.memo, useCallback, and optimize extraData.
3. Optimize FlashList: Match estimatedItemSize with actual item heights; ensure consistent keys.
4. Debounce Updates: Batch layout changes to prevent disruptions.
5. Smooth Transitions: Add animations to reduce abrupt visual changes.
6. Debug Shifts: Investigate unnecessary style toggles.

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

Updates

1. React.memo for Component Memoization
2. useCallback and useMemo for Optimization
3. Improved onScroll and onLayout
4. Updated Scroll-to-Top Logic
5. Updated Render Logic for Empty State
6. General Cleanup

App/src/components/LHNOptionsList/LHNOptionsList.tsx

import React, {useRef, useCallback, useEffect, useMemo} from 'react';
import {StyleSheet, View} from 'react-native';
import {FlashList} from '@shopify/flash-list';
import {useRoute} from '@react-navigation/native';
import {useOnyx} from 'react-native-onyx';
import OptionRowLHNData from './OptionRowLHNData'; // Assuming this is your custom component
import BlockingView from './BlockingView';
import TextBlock from './TextBlock';
import Icon from './Icon';
import useLocalize from '../hooks/useLocalize';
import useTheme from '../hooks/useTheme';
import useThemeStyles from '../hooks/useThemeStyles';
import useResponsiveLayout from '../hooks/useResponsiveLayout';
import usePrevious from '../hooks/usePrevious';
import * as CONST from '../constants';
import * as OptionsListUtils from '../utils/OptionsListUtils';
import * as ReportUtils from '../utils/ReportUtils';
import * as ReportActionsUtils from '../utils/ReportActionsUtils';
import * as DraftCommentUtils from '../utils/DraftCommentUtils';
import * as SidebarUtils from '../utils/SidebarUtils';
import {ScrollOffsetContext} from '../contexts/ScrollOffsetContext';

function LHNOptionsList({
    style,
    contentContainerStyles,
    data,
    onSelectRow,
    optionMode,
    shouldDisableFocusOptions = false,
    onFirstItemRendered = () => {},
}) {
    const {saveScrollOffset, getScrollOffset} = React.useContext(ScrollOffsetContext);
    const flashListRef = useRef(null);
    const route = useRoute();

    const [reports] = useOnyx(CONST.ONYXKEYS.COLLECTION.REPORT);
    const [reportActions] = useOnyx(CONST.ONYXKEYS.COLLECTION.REPORT_ACTIONS);
    const [policy] = useOnyx(CONST.ONYXKEYS.COLLECTION.POLICY);
    const [personalDetails] = useOnyx(CONST.ONYXKEYS.PERSONAL_DETAILS_LIST);
    const [transactions] = useOnyx(CONST.ONYXKEYS.COLLECTION.TRANSACTION);
    const [draftComments] = useOnyx(CONST.ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
    const [transactionViolations] = useOnyx(CONST.ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);

    const theme = useTheme();
    const styles = useThemeStyles();
    const {translate, preferredLocale} = useLocalize();
    const {shouldUseNarrowLayout} = useResponsiveLayout();
    const shouldShowEmptyLHN = shouldUseNarrowLayout && data.length === 0;

    const onLayoutItem = useCallback(() => {
        onFirstItemRendered();
    }, [onFirstItemRendered]);

    const renderItem = useCallback(
        ({item: reportID}) => {
            const fullReport = reports?.[reportID];
            const policyData = policy?.[fullReport?.policyID];
            const lastMessageText = OptionsListUtils.getLastMessageTextForReport(fullReport, personalDetails, policyData);

            return (
                <OptionRowLHNData
                    reportID={reportID}
                    fullReport={fullReport}
                    policy={policyData}
                    personalDetails={personalDetails}
                    lastMessageText={lastMessageText}
                    onSelectRow={onSelectRow}
                    preferredLocale={preferredLocale}
                    hasDraftComment={DraftCommentUtils.isValidDraftComment(draftComments?.[reportID])}
                />
            );
        },
        [reports, policy, personalDetails, onSelectRow, preferredLocale, draftComments],
    );

    const extraData = useMemo(
        () => [reports, policy, personalDetails, data.length, draftComments, optionMode, preferredLocale],
        [reports, policy, personalDetails, data.length, draftComments, optionMode, preferredLocale],
    );

    const previousOptionMode = usePrevious(optionMode);

    useEffect(() => {
        if (previousOptionMode === optionMode || !flashListRef.current) {
            return;
        }
        flashListRef.current.scrollToOffset({offset: 0});
    }, [previousOptionMode, optionMode]);

    const onScroll = useCallback(
        (e) => {
            if (e.nativeEvent.layoutMeasurement.height > 0) {
                saveScrollOffset(route, e.nativeEvent.contentOffset.y);
            }
        },
        [route, saveScrollOffset],
    );

    const onLayout = useCallback(() => {
        const offset = getScrollOffset(route);
        if (offset && flashListRef.current) {
            requestAnimationFrame(() => {
                flashListRef.current.scrollToOffset({offset});
            });
        }
    }, [route, getScrollOffset]);

    return (
        <View style={[style ?? styles.flex1, shouldShowEmptyLHN ? styles.emptyLHNWrapper : undefined]}>
            {shouldShowEmptyLHN ? (
                <BlockingView
                    animation={CONST.LottieAnimations.Fireworks}
                    animationStyles={styles.emptyLHNAnimation}
                    title={translate('common.emptyLHN.title')}
                    shouldShowLink={false}
                />
            ) : (
                <FlashList
                    ref={flashListRef}
                    data={data}
                    renderItem={renderItem}
                    keyExtractor={(item) => item}
                    extraData={extraData}
                    onScroll={onScroll}
                    onLayout={onLayout}
                    estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? CONST.variables.optionRowHeightCompact : CONST.variables.optionRowHeight}
                    showsVerticalScrollIndicator={false}
                    keyboardShouldPersistTaps="always"
                />
            )}
        </View>
    );
}

export default React.memo(LHNOptionsList);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Verify smooth scroll restoration during tab switches.
2. Test with long lists to ensure no flickers.
3. Validate transitions in both empty and populated LHN states.
4. Simulate rapid tab switching for stability.
5. Test across devices and orientations.
6. Check offset handling during mid-scroll tab switches.

What alternative solutions did you explore? (Optional)

• Use a static LHN component to avoid unmounting.
• Manage LHN state globally with Redux/Context for smoother transitions.
• Leverage native optimizations for Android rendering.

[slafortune]

I am not able to reproduce this - reached out to C+ here

Screen_Recording_20241205_145204_New.Expensify.mp4

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[truph01]

@slafortune You can try the below steps to reproduce the bug:

1. Open the ND app and log in using an account with more than 100 reports in the LHN.
2. Scroll to the bottom of the LHN list.
3. Tap on the Search option.
4. Tap on Inbox.

[melvin-bot]

@slafortune Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@slafortune Eep! 4 days overdue now. Issues have feelings too...

[slafortune]

Alright - thank, I was able to recreate this now.