fix: show existing reports while loading

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 (
-        <View style={[styles.flex1]}>
+        <View style={style}>
             <FlatList
                 indicatorStyle="white"
                 keyboardShouldPersistTaps="always"

src/pages/home/sidebar/SidebarLinks.js

@@ -1,5 +1,4 @@
 /* eslint-disable rulesdir/onyx-props-must-have-default */
-import lodashGet from 'lodash/get';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
@@ -32,7 +31,6 @@ import KeyboardShortcut from '../../../libs/KeyboardShortcut';
 import onyxSubscribe from '../../../libs/onyxSubscribe';
 import * as ReportActionContextMenu from '../report/ContextMenu/ReportActionContextMenu';
 import withCurrentReportID from '../../../components/withCurrentReportID';
-import OptionRowLHNData from '../../../components/LHNOptionsList/OptionRowLHNData';
 import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus';
 
 const basePropTypes = {
@@ -186,27 +184,16 @@ class SidebarLinks extends React.PureComponent {
                     </Tooltip>
                     <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={this.props.isCreateMenuOpen} />
                 </View>
-                {this.props.isLoading ? (
-                    <>
-                        {lodashGet(this.props.report, 'reportID') && (
-                            <OptionRowLHNData
-                                reportID={this.props.currentReportID}
-                                viewMode={viewMode}
-                                shouldDisableFocusOptions={this.props.isSmallScreenWidth}
-                                onSelectRow={this.showReportPage}
-                            />
-                        )}
-                        <OptionsListSkeletonView shouldAnimate />
-                    </>
-                ) : (
-                    <LHNOptionsList
-                        contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom}]}
-                        data={this.props.optionListItems}
-                        onSelectRow={this.showReportPage}
-                        shouldDisableFocusOptions={this.props.isSmallScreenWidth}
-                        optionMode={viewMode}
-                    />
-                )}
+
+                <LHNOptionsList
+                    style={[this.props.isLoading ? styles.flexShrink1 : styles.flex1]}
+                    contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom}]}
+                    data={this.props.optionListItems}
+                    onSelectRow={this.showReportPage}
+                    shouldDisableFocusOptions={this.props.isSmallScreenWidth}
+                    optionMode={viewMode}
+                />
+                {this.props.isLoading && <OptionsListSkeletonView shouldAnimate />}
             </View>
         );
     }

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 (
         <View