diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js index 13de5a5e8c52..b1430676afc0 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.js +++ b/src/components/LHNOptionsList/LHNOptionsList.js @@ -8,6 +8,10 @@ import OptionRowLHNData from './OptionRowLHNData'; import variables from '../../styles/variables'; const propTypes = { + /** Wrapper style for the section list */ + // eslint-disable-next-line react/forbid-prop-types + style: PropTypes.arrayOf(PropTypes.object), + /** Extra styles for the section list container */ // eslint-disable-next-line react/forbid-prop-types contentContainerStyles: PropTypes.arrayOf(PropTypes.object).isRequired, @@ -26,10 +30,11 @@ const propTypes = { }; const defaultProps = { + style: styles.flex1, shouldDisableFocusOptions: false, }; -function LHNOptionsList({contentContainerStyles, data, onSelectRow, optionMode, shouldDisableFocusOptions}) { +function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optionMode, shouldDisableFocusOptions}) { /** * This function is used to compute the layout of any given item in our list. Since we know that each item will have the exact same height, this is a performance optimization * so that the heights can be determined before the options are rendered. Otherwise, the heights are determined when each option is rendering and it causes a lot of overhead on large @@ -67,7 +72,7 @@ function LHNOptionsList({contentContainerStyles, data, onSelectRow, optionMode, ); return ( - + - {this.props.isLoading ? ( - <> - {lodashGet(this.props.report, 'reportID') && ( - - )} - - - ) : ( - - )} + + + {this.props.isLoading && } ); } diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index a919607938c7..3eca506f7591 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -66,17 +66,20 @@ const defaultProps = { function SidebarLinksData({isFocused, allReportActions, betas, chatReports, currentReportID, insets, isLoadingReportData, isSmallScreenWidth, onLinkClick, policies, priorityMode}) { const {translate} = useLocalize(); - const reportIDsRef = useRef([]); + const reportIDsRef = useRef(null); + const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData; const optionListItems = useMemo(() => { const reportIDs = SidebarUtils.getOrderedReportIDs(currentReportID, chatReports, betas, policies, priorityMode, allReportActions); if (deepEqual(reportIDsRef.current, reportIDs)) { return reportIDsRef.current; } - reportIDsRef.current = reportIDs; - return reportIDs; - }, [allReportActions, betas, chatReports, currentReportID, policies, priorityMode]); - const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData; + // We need to update existing reports only once while loading because they are updated several times during loading and causes this regression: https://github.com/Expensify/App/issues/24596#issuecomment-1681679531 + if (!isLoading || !reportIDsRef.current || (_.isEmpty(reportIDsRef.current) && currentReportID)) { + reportIDsRef.current = reportIDs; + } + return reportIDsRef.current || []; + }, [allReportActions, betas, chatReports, currentReportID, policies, priorityMode, isLoading]); return (