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 (