From 0c38b1bde78a1686e8775a05861367a289b65b9b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 20 Jan 2023 19:30:58 -0800
Subject: [PATCH 01/26] show skeleton instead of activity indicator while
 loading the app

---
 src/CONST.js                                  |  1 +
 .../LHNOptionsList/LHNOptionsList.js          | 37 +++++-----
 src/components/LHNSkeletonView.js             | 60 +++++++++++++++
 .../AppNavigator/MainDrawerNavigator.js       | 13 +---
 src/libs/Navigation/Navigation.js             | 12 ++-
 src/pages/home/ReportScreen.js                | 62 ++++++++--------
 src/pages/home/report/ReportActionCompose.js  |  5 --
 src/pages/home/sidebar/SidebarLinks.js        | 73 +++++++++++++------
 src/styles/colors.js                          |  1 +
 src/styles/themes/default.js                  |  1 +
 10 files changed, 179 insertions(+), 86 deletions(-)
 create mode 100644 src/components/LHNSkeletonView.js

diff --git a/src/CONST.js b/src/CONST.js
index 9c05e4d716aa..f94a3f9291be 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -522,6 +522,7 @@ const CONST = {
             3: 100,
         },
     },
+    LHN_SKELETON_VIEW_HEIGHT: 64,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EMAIL: {
         CONCIERGE: 'concierge@expensify.com',
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index c8bad6668426..e85ea271c77a 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -1,8 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
-import {View, FlatList} from 'react-native';
+import {FlatList} from 'react-native';
 import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
 import OptionRowLHN from './OptionRowLHN';
 import variables from '../../styles/variables';
 import CONST from '../../CONST';
@@ -84,24 +83,22 @@ class LHNOptionsList extends Component {
 
     render() {
         return (
-            <View style={[styles.flex1]}>
-                <FlatList
-                    indicatorStyle="white"
-                    keyboardShouldPersistTaps="always"
-                    contentContainerStyle={this.props.contentContainerStyles}
-                    showsVerticalScrollIndicator={false}
-                    data={this.props.data}
-                    keyExtractor={item => item}
-                    stickySectionHeadersEnabled={false}
-                    renderItem={this.renderItem}
-                    getItemLayout={this.getItemLayout}
-                    extraData={this.props.focusedIndex}
-                    initialNumToRender={5}
-                    maxToRenderPerBatch={5}
-                    windowSize={5}
-                    onLayout={this.props.onLayout}
-                />
-            </View>
+            <FlatList
+                indicatorStyle="white"
+                keyboardShouldPersistTaps="always"
+                contentContainerStyle={this.props.contentContainerStyles}
+                showsVerticalScrollIndicator={false}
+                data={this.props.data}
+                keyExtractor={item => item}
+                stickySectionHeadersEnabled={false}
+                renderItem={this.renderItem}
+                getItemLayout={this.getItemLayout}
+                extraData={this.props.focusedIndex}
+                initialNumToRender={5}
+                maxToRenderPerBatch={5}
+                windowSize={5}
+                onLayout={this.props.onLayout}
+            />
         );
     }
 }
diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
new file mode 100644
index 000000000000..5afca7400b3e
--- /dev/null
+++ b/src/components/LHNSkeletonView.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Rect, Circle} from 'react-native-svg';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import CONST from '../CONST';
+import themeColors from '../styles/themes/default';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** Height of the container component */
+    containerHeight: PropTypes.number.isRequired,
+
+    /** Whether to animate the skeleton view */
+    animate: PropTypes.bool,
+};
+
+const defaultTypes = {
+    animate: true,
+};
+
+const LHNSkeletonView = props => {
+    const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT;
+    const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight);
+    const skeletonViewLines = [];
+
+    for (let index = 0; index < possibleVisibleContentItems; index++) {
+        const lengthIndex = index % 3;
+        let lineWidth;
+        switch (lengthIndex) {
+            case 0:
+                lineWidth = "100%";
+                break;
+            case 1:
+                lineWidth = "50%";
+                break;
+            default:
+                lineWidth = "65%";
+        }
+        skeletonViewLines.push(
+            <SkeletonViewContentLoader
+                key={`skeletonViewLines${index}`}
+                animate={props.animate}
+                height={skeletonHeight}
+                backgroundColor={themeColors.borderLighter}
+                foregroundColor={themeColors.border}
+                style={styles.mr5}
+            >
+                <Circle cx="40" cy="32" r="20" />
+                <Rect x="76" y="18" width="20%" height="8" />
+                <Rect x="76" y="38" width={lineWidth} height="8" />
+            </SkeletonViewContentLoader>
+        )
+    }
+    return <>{skeletonViewLines}</>;
+};
+
+LHNSkeletonView.displayName = 'LHNSkeletonView';
+LHNSkeletonView.propTypes = propTypes;
+LHNSkeletonView.defaultProps = defaultTypes;
+export default LHNSkeletonView;
diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
index ecc67769e8b8..ac3b0637b1bb 100644
--- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
+++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 
-import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 import ONYXKEYS from '../../../ONYXKEYS';
 import SCREENS from '../../../SCREENS';
 import Permissions from '../../Permissions';
@@ -14,6 +13,7 @@ import SidebarScreen from '../../../pages/home/sidebar/SidebarScreen';
 import BaseDrawerNavigator from './BaseDrawerNavigator';
 import * as ReportUtils from '../../ReportUtils';
 import reportPropTypes from '../../../pages/reportPropTypes';
+import Navigation from '../Navigation';
 
 const propTypes = {
     /** Available reports that would be displayed in this navigator */
@@ -66,19 +66,14 @@ class MainDrawerNavigator extends Component {
             return false;
         }
 
+        if (!this.initialParams.reportID) {
+            Navigation.setParams(initialNextParams);
+        }
         this.initialParams = initialNextParams;
         return true;
     }
 
     render() {
-        // Wait until reports are fetched and there is a reportID in initialParams
-        if (!this.initialParams.reportID) {
-            return <FullScreenLoadingIndicator />;
-        }
-
-        // After the app initializes and reports are available the home navigation is mounted
-        // This way routing information is updated (if needed) based on the initial report ID resolved.
-        // This is usually needed after login/create account and re-launches
         return (
             <BaseDrawerNavigator
                 drawerContent={({navigation, state}) => {
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index e937e501597a..1090063d3c7e 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {Keyboard} from 'react-native';
-import {DrawerActions, getPathFromState, StackActions} from '@react-navigation/native';
+import {DrawerActions, getPathFromState, StackActions, CommonActions} from '@react-navigation/native';
 import Onyx from 'react-native-onyx';
 import Log from '../Log';
 import linkTo from './linkTo';
@@ -160,6 +160,15 @@ function navigate(route = ROUTES.HOME) {
     linkTo(navigationRef.current, route);
 }
 
+/**
+ * Update route params for the currently focused route.
+ * 
+ * @param {Object} params 
+ */
+function setParams(params) {
+    navigationRef.current.dispatch(CommonActions.setParams(params));
+}
+
 /**
  * Dismisses a screen presented modally and returns us back to the previous view.
  *
@@ -256,6 +265,7 @@ function setIsDrawerReady() {
 export default {
     canNavigate,
     navigate,
+    setParams,
     dismissModal,
     isActiveRoute,
     getActiveRoute,
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 5b665c525b38..010efff80401 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -156,7 +156,7 @@ class ReportScreen extends React.Component {
 
         // This is necessary so that when we are retrieving the next report data from Onyx the ReportActionsView will remount completely
         const isTransitioning = this.props.report && this.props.report.reportID !== reportIDFromPath;
-        return reportIDFromPath && this.props.report.reportID && !isTransitioning;
+        return reportIDFromPath !== '' && this.props.report.reportID && !isTransitioning;
     }
 
     fetchReportIfNeeded() {
@@ -189,10 +189,6 @@ class ReportScreen extends React.Component {
     }
 
     render() {
-        if (!this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails)) {
-            return null;
-        }
-
         // We create policy rooms for all policies, however we don't show them unless
         // - It's a free plan workspace
         // - The report includes guides participants (@team.expensify.com) for 1:1 Assigned
@@ -223,6 +219,8 @@ class ReportScreen extends React.Component {
         // When the ReportScreen is not open/in the viewport, we want to "freeze" it for performance reasons
         const freeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen;
 
+        const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails) || isLoadingInitialReportActions;
+
         // the moment the ReportScreen becomes unfrozen we want to start the animation of the placeholder skeleton content
         // (which is shown, until all the actual views of the ReportScreen have been rendered)
         const animatePlaceholder = !freeze;
@@ -244,7 +242,7 @@ class ReportScreen extends React.Component {
                     )}
                 >
                     <FullPageNotFoundView
-                        shouldShow={!this.props.report.reportID}
+                        shouldShow={!this.props.report.reportID && !isLoading}
                         subtitleKey="notFound.noAccess"
                         shouldShowCloseButton={false}
                         shouldShowBackButton={this.props.isSmallScreenWidth}
@@ -252,28 +250,32 @@ class ReportScreen extends React.Component {
                             Navigation.navigate(ROUTES.HOME);
                         }}
                     >
-                        <OfflineWithFeedback
-                            pendingAction={addWorkspaceRoomOrChatPendingAction}
-                            errors={addWorkspaceRoomOrChatErrors}
-                            shouldShowErrorMessages={false}
-                        >
-                            <HeaderView
-                                reportID={reportID}
-                                onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
-                                personalDetails={this.props.personalDetails}
-                                report={this.props.report}
-                                policies={this.props.policies}
-                            />
-                        </OfflineWithFeedback>
-                        {this.props.accountManagerReportID && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
-                            <Banner
-                                containerStyles={[styles.mh4, styles.mt4, styles.p4, styles.bgDark]}
-                                textStyles={[styles.colorReversed]}
-                                text={this.props.translate('reportActionsView.chatWithAccountManager')}
-                                onClose={this.dismissBanner}
-                                onPress={this.chatWithAccountManager}
-                                shouldShowCloseButton
-                            />
+                        {(isLoading && !isLoadingInitialReportActions) ? <ReportHeaderSkeletonView animate={animatePlaceholder} /> : (
+                            <>
+                                <OfflineWithFeedback
+                                    pendingAction={addWorkspaceRoomOrChatPendingAction}
+                                    errors={addWorkspaceRoomOrChatErrors}
+                                    shouldShowErrorMessages={false}
+                                >
+                                    <HeaderView
+                                        reportID={reportID}
+                                        onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
+                                        personalDetails={this.props.personalDetails}
+                                        report={this.props.report}
+                                        policies={this.props.policies}
+                                    />
+                                </OfflineWithFeedback>
+                                {this.props.accountManagerReportID && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
+                                    <Banner
+                                        containerStyles={[styles.mh4, styles.mt4, styles.p4, styles.bgDark]}
+                                        textStyles={[styles.colorReversed]}
+                                        text={this.props.translate('reportActionsView.chatWithAccountManager')}
+                                        onClose={this.dismissBanner}
+                                        onPress={this.chatWithAccountManager}
+                                        shouldShowCloseButton
+                                    />
+                                )}
+                            </>
                         )}
                         <View
                             nativeID={CONST.REPORT.DROP_NATIVE_ID}
@@ -290,7 +292,7 @@ class ReportScreen extends React.Component {
                                 this.setState({skeletonViewContainerHeight});
                             }}
                         >
-                            {(this.isReportReadyForDisplay() && !isLoadingInitialReportActions) && (
+                            {(this.isReportReadyForDisplay() && !isLoading) && (
                                 <>
                                     <ReportActionsView
                                         reportActions={this.props.reportActions}
@@ -314,7 +316,7 @@ class ReportScreen extends React.Component {
 
                             {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then
                             we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */}
-                            {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions) && (
+                            {(!this.isReportReadyForDisplay() || isLoading) && (
                                 <>
                                     <ReportActionsSkeletonView containerHeight={this.state.skeletonViewContainerHeight} />
                                     <ReportFooter shouldDisableCompose isOffline={this.props.network.isOffline} />
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index f88ea64b4fc4..b2de79669869 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -514,11 +514,6 @@ class ReportActionCompose extends React.Component {
     }
 
     render() {
-        // Waiting until ONYX variables are loaded before displaying the component
-        if (_.isEmpty(this.props.personalDetails)) {
-            return null;
-        }
-
         const reportParticipants = _.without(lodashGet(this.props.report, 'participants', []), this.props.currentUserPersonalDetails.login);
         const participantsWithoutExpensifyEmails = _.difference(reportParticipants, CONST.EXPENSIFY_EMAILS);
         const reportRecipient = this.props.personalDetails[participantsWithoutExpensifyEmails[0]];
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index fe2813db03eb..9618ab7f6b91 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -29,6 +29,7 @@ import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList';
 import SidebarUtils from '../../../libs/SidebarUtils';
 import reportPropTypes from '../../reportPropTypes';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
+import LHNSkeletonView from '../../../components/LHNSkeletonView';
 
 const propTypes = {
     /** Toggles the navigation menu open and closed */
@@ -81,6 +82,9 @@ const defaultProps = {
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
 };
 
+// Keep a reference to the screen height so we can use it when a new SidebarLinks component mounts
+let lhnListHeight = 0;
+
 class SidebarLinks extends React.Component {
     constructor(props) {
         super(props);
@@ -88,6 +92,10 @@ class SidebarLinks extends React.Component {
         this.showSearchPage = this.showSearchPage.bind(this);
         this.showSettingsPage = this.showSettingsPage.bind(this);
         this.showReportPage = this.showReportPage.bind(this);
+
+        this.state = {
+            skeletonViewContainerHeight: lhnListHeight,
+        }
     }
 
     showSearchPage() {
@@ -122,11 +130,13 @@ class SidebarLinks extends React.Component {
     }
 
     render() {
-        // Wait until the personalDetails are actually loaded before displaying the LHN
-        if (_.isEmpty(this.props.personalDetails)) {
-            return null;
-        }
+        const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
+        const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded;
+        const animatePlaceholder = !freeze;
         const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);
+
+        const skeletonPlaceholder = <LHNSkeletonView containerHeight={this.state.skeletonViewContainerHeight} animate={animatePlaceholder} />;
+        
         return (
             <View
                 accessibilityElementsHidden={this.props.isSmallScreenWidth && !this.props.isDrawerOpen}
@@ -156,6 +166,7 @@ class SidebarLinks extends React.Component {
                             accessibilityRole="button"
                             style={[styles.flexRow, styles.ph5]}
                             onPress={this.showSearchPage}
+                            disabled={isLoading}
                         >
                             <Icon src={Expensicons.MagnifyingGlass} />
                         </TouchableOpacity>
@@ -164,6 +175,7 @@ class SidebarLinks extends React.Component {
                         accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')}
                         accessibilityRole="button"
                         onPress={this.showSettingsPage}
+                        disabled={isLoading}
                     >
                         <OfflineWithFeedback
                             pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
@@ -175,24 +187,43 @@ class SidebarLinks extends React.Component {
                         </OfflineWithFeedback>
                     </TouchableOpacity>
                 </View>
-                <Freeze freeze={this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded}>
-                    <LHNOptionsList
-                        contentContainerStyles={[
-                            styles.sidebarListContainer,
-                            {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom},
-                        ]}
-                        data={optionListItems}
-                        focusedIndex={_.findIndex(optionListItems, (
-                            option => option.toString() === this.props.reportIDFromRoute
-                        ))}
-                        onSelectRow={this.showReportPage}
-                        shouldDisableFocusOptions={this.props.isSmallScreenWidth}
-                        optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'}
-                        onLayout={() => {
-                            App.setSidebarLoaded();
-                            this.isSidebarLoaded = true;
+                <Freeze 
+                    freeze={freeze}
+                    placeholder={skeletonPlaceholder}>
+                    <View
+                        style={styles.flex1}
+                        onLayout={(event) => {
+                            const skeletonViewContainerHeight = event.nativeEvent.layout.height;
+        
+                            // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it
+                            // takes up so we can set the skeleton view container height.
+                            if (skeletonViewContainerHeight === 0) {
+                                return;
+                            }
+                            lhnListHeight = skeletonViewContainerHeight;
+                            this.setState({skeletonViewContainerHeight});
                         }}
-                    />
+                    >
+                        {isLoading ? skeletonPlaceholder : (
+                            <LHNOptionsList
+                                contentContainerStyles={[
+                                    styles.sidebarListContainer,
+                                    {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom},
+                                ]}
+                                data={optionListItems}
+                                focusedIndex={_.findIndex(optionListItems, (
+                                    option => option.toString() === this.props.reportIDFromRoute
+                                ))}
+                                onSelectRow={this.showReportPage}
+                                shouldDisableFocusOptions={this.props.isSmallScreenWidth}
+                                optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT}
+                                onLayout={() => {
+                                    App.setSidebarLoaded();
+                                    this.isSidebarLoaded = true;
+                                }}
+                            />
+                        )}
+                    </View>
                 </Freeze>
             </View>
         );
diff --git a/src/styles/colors.js b/src/styles/colors.js
index 7af4003a67f6..2d6d469e5181 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -24,6 +24,7 @@ export default {
     greenAppBackground: '#061B09',
     greenHighlightBackground: '#07271F',
     greenBorders: '#1A3D32',
+    greenBordersLighter: '#2B5548',
     greenIcons: '#8B9C8F',
     greenSupportingText: '#AFBBB0',
     white: '#E7ECE9',
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 823f58c598ce..75f470324118 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -6,6 +6,7 @@ const darkTheme = {
     appBG: colors.greenAppBackground,
     highlightBG: colors.greenHighlightBackground,
     border: colors.greenBorders,
+    borderLighter: colors.greenBordersLighter,
     borderFocus: colors.green,
     icon: colors.greenIcons,
     iconMenu: colors.green,

From a430364df32f860900eb8e30e30c44b86b32c812 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 20 Jan 2023 19:31:17 -0800
Subject: [PATCH 02/26] only show back button on small screen

---
 src/components/ReportHeaderSkeletonView.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index 6196fca054fd..fc303aad46db 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -22,12 +22,14 @@ const defaultProps = {
 const ReportHeaderSkeletonView = props => (
     <View style={[styles.appContentHeader]}>
         <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
-            <Pressable
-                onPress={() => {}}
-                style={[styles.LHNToggle]}
-            >
-                <Icon src={Expensicons.BackArrow} />
-            </Pressable>
+            {props.isSmallScreenWidth && (
+                <Pressable
+                    onPress={() => {}}
+                    style={[styles.LHNToggle]}
+                >
+                    <Icon src={Expensicons.BackArrow} />
+                </Pressable>
+            )}
             <SkeletonViewContentLoader
                 animate={props.animate}
                 width={styles.w100.width}

From ea87754115521d70b6a3e12580f85436c875cf8b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 20 Jan 2023 20:21:18 -0800
Subject: [PATCH 03/26] move around the loading state

---
 src/pages/home/ReportScreen.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 010efff80401..7f2b33438704 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -219,7 +219,7 @@ class ReportScreen extends React.Component {
         // When the ReportScreen is not open/in the viewport, we want to "freeze" it for performance reasons
         const freeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen;
 
-        const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails) || isLoadingInitialReportActions;
+        const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails);
 
         // the moment the ReportScreen becomes unfrozen we want to start the animation of the placeholder skeleton content
         // (which is shown, until all the actual views of the ReportScreen have been rendered)
@@ -250,7 +250,7 @@ class ReportScreen extends React.Component {
                             Navigation.navigate(ROUTES.HOME);
                         }}
                     >
-                        {(isLoading && !isLoadingInitialReportActions) ? <ReportHeaderSkeletonView animate={animatePlaceholder} /> : (
+                        {isLoading ? <ReportHeaderSkeletonView animate={animatePlaceholder} /> : (
                             <>
                                 <OfflineWithFeedback
                                     pendingAction={addWorkspaceRoomOrChatPendingAction}
@@ -292,7 +292,7 @@ class ReportScreen extends React.Component {
                                 this.setState({skeletonViewContainerHeight});
                             }}
                         >
-                            {(this.isReportReadyForDisplay() && !isLoading) && (
+                            {(this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading) && (
                                 <>
                                     <ReportActionsView
                                         reportActions={this.props.reportActions}
@@ -316,7 +316,7 @@ class ReportScreen extends React.Component {
 
                             {/* Note: The report should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then
                             we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */}
-                            {(!this.isReportReadyForDisplay() || isLoading) && (
+                            {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && (
                                 <>
                                     <ReportActionsSkeletonView containerHeight={this.state.skeletonViewContainerHeight} />
                                     <ReportFooter shouldDisableCompose isOffline={this.props.network.isOffline} />

From 5a93cecd400f3258d6011707ca62a4c21462c419 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 20 Jan 2023 20:52:37 -0800
Subject: [PATCH 04/26] fix lint

---
 src/components/LHNSkeletonView.js      | 10 +++++-----
 src/libs/Navigation/Navigation.js      |  8 +++++---
 src/pages/home/sidebar/SidebarLinks.js | 11 ++++++-----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index 5afca7400b3e..ec8b02d71a6b 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -18,7 +18,7 @@ const defaultTypes = {
     animate: true,
 };
 
-const LHNSkeletonView = props => {
+const LHNSkeletonView = (props) => {
     const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT;
     const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight);
     const skeletonViewLines = [];
@@ -28,13 +28,13 @@ const LHNSkeletonView = props => {
         let lineWidth;
         switch (lengthIndex) {
             case 0:
-                lineWidth = "100%";
+                lineWidth = '100%';
                 break;
             case 1:
-                lineWidth = "50%";
+                lineWidth = '50%';
                 break;
             default:
-                lineWidth = "65%";
+                lineWidth = '65%';
         }
         skeletonViewLines.push(
             <SkeletonViewContentLoader
@@ -49,7 +49,7 @@ const LHNSkeletonView = props => {
                 <Rect x="76" y="18" width="20%" height="8" />
                 <Rect x="76" y="38" width={lineWidth} height="8" />
             </SkeletonViewContentLoader>
-        )
+        );
     }
     return <>{skeletonViewLines}</>;
 };
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index 1090063d3c7e..bf178189a981 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -1,7 +1,9 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {Keyboard} from 'react-native';
-import {DrawerActions, getPathFromState, StackActions, CommonActions} from '@react-navigation/native';
+import {
+    DrawerActions, getPathFromState, StackActions, CommonActions,
+} from '@react-navigation/native';
 import Onyx from 'react-native-onyx';
 import Log from '../Log';
 import linkTo from './linkTo';
@@ -162,8 +164,8 @@ function navigate(route = ROUTES.HOME) {
 
 /**
  * Update route params for the currently focused route.
- * 
- * @param {Object} params 
+ *
+ * @param {Object} params
  */
 function setParams(params) {
     navigationRef.current.dispatch(CommonActions.setParams(params));
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 9618ab7f6b91..d20b17e091bd 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -95,7 +95,7 @@ class SidebarLinks extends React.Component {
 
         this.state = {
             skeletonViewContainerHeight: lhnListHeight,
-        }
+        };
     }
 
     showSearchPage() {
@@ -136,7 +136,7 @@ class SidebarLinks extends React.Component {
         const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);
 
         const skeletonPlaceholder = <LHNSkeletonView containerHeight={this.state.skeletonViewContainerHeight} animate={animatePlaceholder} />;
-        
+
         return (
             <View
                 accessibilityElementsHidden={this.props.isSmallScreenWidth && !this.props.isDrawerOpen}
@@ -187,14 +187,15 @@ class SidebarLinks extends React.Component {
                         </OfflineWithFeedback>
                     </TouchableOpacity>
                 </View>
-                <Freeze 
+                <Freeze
                     freeze={freeze}
-                    placeholder={skeletonPlaceholder}>
+                    placeholder={skeletonPlaceholder}
+                >
                     <View
                         style={styles.flex1}
                         onLayout={(event) => {
                             const skeletonViewContainerHeight = event.nativeEvent.layout.height;
-        
+
                             // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it
                             // takes up so we can set the skeleton view container height.
                             if (skeletonViewContainerHeight === 0) {

From 3574120e9282020f38d64d6233d2f56023022a0a Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 20 Jan 2023 22:21:36 -0800
Subject: [PATCH 05/26] fix lint

---
 src/components/LHNSkeletonView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index ec8b02d71a6b..0e930e9eedcd 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -48,7 +48,7 @@ const LHNSkeletonView = (props) => {
                 <Circle cx="40" cy="32" r="20" />
                 <Rect x="76" y="18" width="20%" height="8" />
                 <Rect x="76" y="38" width={lineWidth} height="8" />
-            </SkeletonViewContentLoader>
+            </SkeletonViewContentLoader>,
         );
     }
     return <>{skeletonViewLines}</>;

From 60011ae6948a01330d75b2f28cfda8d3836d73d6 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 21 Jan 2023 17:07:19 -0800
Subject: [PATCH 06/26] update skeleton line position

---
 src/components/LHNSkeletonView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index 0e930e9eedcd..2eaa3a36c0ae 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -46,8 +46,8 @@ const LHNSkeletonView = (props) => {
                 style={styles.mr5}
             >
                 <Circle cx="40" cy="32" r="20" />
-                <Rect x="76" y="18" width="20%" height="8" />
-                <Rect x="76" y="38" width={lineWidth} height="8" />
+                <Rect x="72" y="18" width="20%" height="8" />
+                <Rect x="72" y="38" width={lineWidth} height="8" />
             </SkeletonViewContentLoader>,
         );
     }

From f2f5c25b29d40b1f2628c50bc06b14ef934938a1 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sun, 22 Jan 2023 20:35:27 -0800
Subject: [PATCH 07/26] set the params to the specific route

---
 .../Navigation/AppNavigator/MainDrawerNavigator.js     |  4 +++-
 src/libs/Navigation/Navigation.js                      | 10 +++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
index ac3b0637b1bb..9752c1ca493b 100644
--- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
+++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
@@ -67,7 +67,9 @@ class MainDrawerNavigator extends Component {
         }
 
         if (!this.initialParams.reportID) {
-            Navigation.setParams(initialNextParams);
+            const state = this.props.navigation.getState();
+            const reportScreenKey = lodashGet(state, 'routes[0].state.routes[0].key', '');
+            Navigation.setParams(initialNextParams, reportScreenKey);
         }
         this.initialParams = initialNextParams;
         return true;
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index bf178189a981..3635a78402f5 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -163,12 +163,16 @@ function navigate(route = ROUTES.HOME) {
 }
 
 /**
- * Update route params for the currently focused route.
+ * Update route params for the specified route.
  *
  * @param {Object} params
+ * @param {String} routeKey
  */
-function setParams(params) {
-    navigationRef.current.dispatch(CommonActions.setParams(params));
+function setParams(params, routeKey) {
+    navigationRef.current.dispatch({
+        ...CommonActions.setParams(params),
+        source: routeKey,
+    });
 }
 
 /**

From 27c99ef044e49832fef8729a099cd17ba5919602 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sun, 22 Jan 2023 20:55:52 -0800
Subject: [PATCH 08/26] fix lint

---
 src/libs/Navigation/AppNavigator/MainDrawerNavigator.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
index 9752c1ca493b..cffd83a6d142 100644
--- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
+++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
@@ -14,6 +14,7 @@ import BaseDrawerNavigator from './BaseDrawerNavigator';
 import * as ReportUtils from '../../ReportUtils';
 import reportPropTypes from '../../../pages/reportPropTypes';
 import Navigation from '../Navigation';
+import {withNavigationPropTypes} from '../../../components/withNavigation';
 
 const propTypes = {
     /** Available reports that would be displayed in this navigator */
@@ -30,6 +31,8 @@ const propTypes = {
         /** The type of the policy */
         type: PropTypes.string,
     })),
+
+    ...withNavigationPropTypes,
 };
 
 const defaultProps = {

From efbfd4db9c9269c28698d75575717cfad1951b74 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Mon, 23 Jan 2023 19:55:49 -0800
Subject: [PATCH 09/26] undisable header buttons

---
 src/pages/home/sidebar/SidebarLinks.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index d20b17e091bd..7c0022815af0 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -166,7 +166,6 @@ class SidebarLinks extends React.Component {
                             accessibilityRole="button"
                             style={[styles.flexRow, styles.ph5]}
                             onPress={this.showSearchPage}
-                            disabled={isLoading}
                         >
                             <Icon src={Expensicons.MagnifyingGlass} />
                         </TouchableOpacity>
@@ -175,7 +174,6 @@ class SidebarLinks extends React.Component {
                         accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')}
                         accessibilityRole="button"
                         onPress={this.showSettingsPage}
-                        disabled={isLoading}
                     >
                         <OfflineWithFeedback
                             pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}

From 9ba9aee6d7b97510e8d8091dae8f0d1a5297fe05 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 26 Jan 2023 02:46:13 -0800
Subject: [PATCH 10/26] hide new workspace menu while loading

---
 .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.js  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index 6fe0447ef495..4520dda297ed 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -207,7 +207,7 @@ class FloatingActionButtonAndPopover extends React.Component {
                                 onSelected: () => Navigation.navigate(ROUTES.IOU_BILL),
                             },
                         ] : []),
-                        ...(!Policy.hasActiveFreePolicy(this.props.allPolicies) ? [
+                        ...(!this.props.isLoading && !Policy.hasActiveFreePolicy(this.props.allPolicies) ? [
                             {
                                 icon: Expensicons.NewWorkspace,
                                 iconWidth: 46,
@@ -247,5 +247,8 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        isLoading: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
 )(FloatingActionButtonAndPopover);

From 5fc592166fdc78f0dc925ca8b695450234fa4613 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 26 Jan 2023 08:49:41 -0800
Subject: [PATCH 11/26] add animation for popover menu item

---
 src/components/PopoverMenu/index.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 0dabaa332417..a1d63e79c5c5 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
+import Animated, {FadeIn} from 'react-native-reanimated';
 import Popover from '../Popover';
 import styles from '../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
@@ -112,16 +113,18 @@ class PopoverMenu extends PureComponent {
                         onFocusedIndexChanged={index => this.setState({focusedIndex: index})}
                     >
                         {_.map(this.props.menuItems, (item, menuIndex) => (
-                            <MenuItem
-                                key={item.text}
-                                icon={item.icon}
-                                iconWidth={item.iconWidth}
-                                iconHeight={item.iconHeight}
-                                title={item.text}
-                                description={item.description}
-                                onPress={() => this.selectItem(item)}
-                                focused={this.state.focusedIndex === menuIndex}
-                            />
+                            <Animated.View entering={FadeIn} key={item.text}>
+                                <MenuItem
+                                    key={item.text}
+                                    icon={item.icon}
+                                    iconWidth={item.iconWidth}
+                                    iconHeight={item.iconHeight}
+                                    title={item.text}
+                                    description={item.description}
+                                    onPress={() => this.selectItem(item)}
+                                    focused={this.state.focusedIndex === menuIndex}
+                                />
+                            </Animated.View>
                         ))}
                     </ArrowKeyFocusManager>
                 </View>

From 18775b1544f41741c48b238d44df8de3b81746bf Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 26 Jan 2023 08:50:18 -0800
Subject: [PATCH 12/26] remove key

---
 src/components/PopoverMenu/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index a1d63e79c5c5..cf4a2e140637 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -115,7 +115,6 @@ class PopoverMenu extends PureComponent {
                         {_.map(this.props.menuItems, (item, menuIndex) => (
                             <Animated.View entering={FadeIn} key={item.text}>
                                 <MenuItem
-                                    key={item.text}
                                     icon={item.icon}
                                     iconWidth={item.iconWidth}
                                     iconHeight={item.iconHeight}

From 36a618164a25706fd36e9ebaff80d88b88b6d2cb Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 10 Feb 2023 19:32:18 -0800
Subject: [PATCH 13/26] fix open report is called on existing report

---
 src/pages/home/ReportScreen.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 3c455087f29a..ec63e2418c99 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -127,7 +127,7 @@ class ReportScreen extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (this.props.route.params.reportID === prevProps.route.params.reportID) {
+        if (this.props.report.reportID === prevProps.report.reportID) {
             return;
         }
 
@@ -162,6 +162,10 @@ class ReportScreen extends React.Component {
     fetchReportIfNeeded() {
         const reportIDFromPath = getReportID(this.props.route);
 
+        if (!reportIDFromPath) {
+            return;
+        }
+
         // It possible that we may not have the report object yet in Onyx yet e.g. we navigated to a URL for an accessible report that
         // is not stored locally yet. If props.report.reportID exists, then the report has been stored locally and nothing more needs to be done.
         // If it doesn't exist, then we fetch the report from the API.

From 733c0f8d5f08df78d3f2651fa007397a8f78ad91 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 10 Feb 2023 20:12:18 -0800
Subject: [PATCH 14/26] add comment

---
 src/pages/home/ReportScreen.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 0f1a269211fa..b84f83d93c7f 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -155,6 +155,8 @@ class ReportScreen extends React.Component {
     fetchReportIfNeeded() {
         const reportIDFromPath = getReportID(this.props.route);
 
+        // Report ID will be empty when the reports collection is empty.
+        // This could happen when we are loading the collection for the first time after logging in.
         if (!reportIDFromPath) {
             return;
         }

From 1e2ff6c7a29e39047b3b9e01c2e4b4e144919201 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Mon, 20 Feb 2023 00:08:48 -0800
Subject: [PATCH 15/26] revert animation

---
 src/components/PopoverMenu/index.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index cf4a2e140637..16f03ffa951b 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -113,17 +113,16 @@ class PopoverMenu extends PureComponent {
                         onFocusedIndexChanged={index => this.setState({focusedIndex: index})}
                     >
                         {_.map(this.props.menuItems, (item, menuIndex) => (
-                            <Animated.View entering={FadeIn} key={item.text}>
-                                <MenuItem
-                                    icon={item.icon}
-                                    iconWidth={item.iconWidth}
-                                    iconHeight={item.iconHeight}
-                                    title={item.text}
-                                    description={item.description}
-                                    onPress={() => this.selectItem(item)}
-                                    focused={this.state.focusedIndex === menuIndex}
-                                />
-                            </Animated.View>
+                            <MenuItem
+                                key={item.text}
+                                icon={item.icon}
+                                iconWidth={item.iconWidth}
+                                iconHeight={item.iconHeight}
+                                title={item.text}
+                                description={item.description}
+                                onPress={() => this.selectItem(item)}
+                                focused={this.state.focusedIndex === menuIndex}
+                            />
                         ))}
                     </ArrowKeyFocusManager>
                 </View>

From 33140fb03f086957716c83494b30d00f420e67da Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Mon, 20 Feb 2023 00:11:22 -0800
Subject: [PATCH 16/26] fix lint

---
 src/components/PopoverMenu/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 16f03ffa951b..0dabaa332417 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -1,7 +1,6 @@
 import _ from 'underscore';
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
-import Animated, {FadeIn} from 'react-native-reanimated';
 import Popover from '../Popover';
 import styles from '../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';

From 4abf178e4cc5b10889195ed29d69a33cf975d7e1 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 1 Mar 2023 19:24:32 -0800
Subject: [PATCH 17/26] fix inconsistent skeleton height

---
 src/components/LHNSkeletonView.js      | 5 +++--
 src/pages/home/sidebar/SidebarLinks.js | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index 2eaa3a36c0ae..48e8c829204a 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import {Rect, Circle} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
@@ -20,7 +21,7 @@ const defaultTypes = {
 
 const LHNSkeletonView = (props) => {
     const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT;
-    const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight);
+    const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight);
     const skeletonViewLines = [];
 
     for (let index = 0; index < possibleVisibleContentItems; index++) {
@@ -51,7 +52,7 @@ const LHNSkeletonView = (props) => {
             </SkeletonViewContentLoader>,
         );
     }
-    return <>{skeletonViewLines}</>;
+    return <View>{skeletonViewLines}</View>;
 };
 
 LHNSkeletonView.displayName = 'LHNSkeletonView';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 6dbe4c561fd7..670c8fa13e8d 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -137,7 +137,7 @@ class SidebarLinks extends React.Component {
     }
 
     render() {
-        const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
+        const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports) || true;
         const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded;
         const animatePlaceholder = !freeze;
         const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);

From 9f7df797710cb9f9cf3b5dba2f821e69226a431c Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 1 Mar 2023 19:29:39 -0800
Subject: [PATCH 18/26] fix lint

---
 src/components/LHNSkeletonView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index 48e8c829204a..b9727f685c15 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {Rect, Circle} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';

From e2f63dbb58a6c5993e047e964b96a1a9cc57ca3a Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 1 Mar 2023 21:22:04 -0800
Subject: [PATCH 19/26] Revert "fix inconsistent skeleton height"

This reverts commit 4abf178e4cc5b10889195ed29d69a33cf975d7e1.
---
 src/components/LHNSkeletonView.js      | 5 ++---
 src/pages/home/sidebar/SidebarLinks.js | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index b9727f685c15..2eaa3a36c0ae 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {Rect, Circle} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
@@ -21,7 +20,7 @@ const defaultTypes = {
 
 const LHNSkeletonView = (props) => {
     const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT;
-    const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight);
+    const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight);
     const skeletonViewLines = [];
 
     for (let index = 0; index < possibleVisibleContentItems; index++) {
@@ -52,7 +51,7 @@ const LHNSkeletonView = (props) => {
             </SkeletonViewContentLoader>,
         );
     }
-    return <View>{skeletonViewLines}</View>;
+    return <>{skeletonViewLines}</>;
 };
 
 LHNSkeletonView.displayName = 'LHNSkeletonView';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 670c8fa13e8d..6dbe4c561fd7 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -137,7 +137,7 @@ class SidebarLinks extends React.Component {
     }
 
     render() {
-        const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports) || true;
+        const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
         const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded;
         const animatePlaceholder = !freeze;
         const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);

From 4b0dbef176f0c59b9e484b3f088b133c20089413 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 1 Mar 2023 21:24:07 -0800
Subject: [PATCH 20/26] fix inconsistent skeleton height

---
 src/components/LHNSkeletonView.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index 2eaa3a36c0ae..cbcf6f8ccff7 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {Rect, Circle} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
@@ -51,7 +52,7 @@ const LHNSkeletonView = (props) => {
             </SkeletonViewContentLoader>,
         );
     }
-    return <>{skeletonViewLines}</>;
+    return <View>{skeletonViewLines}</View>;
 };
 
 LHNSkeletonView.displayName = 'LHNSkeletonView';

From d080b578a3afc6be7d53077f54808323d567e881 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Mar 2023 00:59:55 -0800
Subject: [PATCH 21/26] use ceil to get the number of skeleton

---
 src/components/LHNSkeletonView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index cbcf6f8ccff7..b9727f685c15 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -21,7 +21,7 @@ const defaultTypes = {
 
 const LHNSkeletonView = (props) => {
     const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT;
-    const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight);
+    const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight);
     const skeletonViewLines = [];
 
     for (let index = 0; index < possibleVisibleContentItems; index++) {

From 22249d22631468afec0e0dd3371474527165064c Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Mar 2023 18:47:47 -0800
Subject: [PATCH 22/26] move the height calculation to the skeleton component

---
 src/CONST.js                                  |   2 +-
 .../LHNOptionsList/LHNOptionsList.js          |  37 +++---
 src/components/LHNSkeletonView.js             | 110 ++++++++++++------
 src/pages/home/sidebar/SidebarLinks.js        |  65 ++++-------
 4 files changed, 115 insertions(+), 99 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 275039a5cc94..55ff2f49990b 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -561,7 +561,7 @@ const CONST = {
             3: 100,
         },
     },
-    LHN_SKELETON_VIEW_HEIGHT: 64,
+    LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EMAIL: {
         CONCIERGE: 'concierge@expensify.com',
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index e85ea271c77a..c8bad6668426 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -1,7 +1,8 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
-import {FlatList} from 'react-native';
+import {View, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
 import OptionRowLHN from './OptionRowLHN';
 import variables from '../../styles/variables';
 import CONST from '../../CONST';
@@ -83,22 +84,24 @@ class LHNOptionsList extends Component {
 
     render() {
         return (
-            <FlatList
-                indicatorStyle="white"
-                keyboardShouldPersistTaps="always"
-                contentContainerStyle={this.props.contentContainerStyles}
-                showsVerticalScrollIndicator={false}
-                data={this.props.data}
-                keyExtractor={item => item}
-                stickySectionHeadersEnabled={false}
-                renderItem={this.renderItem}
-                getItemLayout={this.getItemLayout}
-                extraData={this.props.focusedIndex}
-                initialNumToRender={5}
-                maxToRenderPerBatch={5}
-                windowSize={5}
-                onLayout={this.props.onLayout}
-            />
+            <View style={[styles.flex1]}>
+                <FlatList
+                    indicatorStyle="white"
+                    keyboardShouldPersistTaps="always"
+                    contentContainerStyle={this.props.contentContainerStyles}
+                    showsVerticalScrollIndicator={false}
+                    data={this.props.data}
+                    keyExtractor={item => item}
+                    stickySectionHeadersEnabled={false}
+                    renderItem={this.renderItem}
+                    getItemLayout={this.getItemLayout}
+                    extraData={this.props.focusedIndex}
+                    initialNumToRender={5}
+                    maxToRenderPerBatch={5}
+                    windowSize={5}
+                    onLayout={this.props.onLayout}
+                />
+            </View>
         );
     }
 }
diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index b9727f685c15..dfc03df482c5 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -8,54 +8,90 @@ import themeColors from '../styles/themes/default';
 import styles from '../styles/styles';
 
 const propTypes = {
-    /** Height of the container component */
-    containerHeight: PropTypes.number.isRequired,
-
     /** Whether to animate the skeleton view */
-    animate: PropTypes.bool,
+    shouldAnimate: PropTypes.bool,
 };
 
 const defaultTypes = {
-    animate: true,
+    shouldAnimate: true,
 };
 
-const LHNSkeletonView = (props) => {
-    const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT;
-    const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight);
-    const skeletonViewLines = [];
-
-    for (let index = 0; index < possibleVisibleContentItems; index++) {
-        const lengthIndex = index % 3;
-        let lineWidth;
-        switch (lengthIndex) {
-            case 0:
-                lineWidth = '100%';
-                break;
-            case 1:
-                lineWidth = '50%';
-                break;
-            default:
-                lineWidth = '65%';
+class LHNSkeletonView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            skeletonViewItems: [],
+        };
+    }
+
+    /**
+     * Generate the skeleton view items.
+     *
+     * @param numItems
+     */
+    generateSkeletonViewItems(numItems) {
+        if (this.state.skeletonViewItems.length === numItems) {
+            return;
+        }
+
+        if (this.state.skeletonViewItems.length > numItems) {
+            this.setState(prevState => ({
+                skeletonViewItems: prevState.skeletonViewItems.slice(0, numItems),
+            }));
+            return;
+        }
+
+        const skeletonViewItems = [];
+        for (let i = this.state.skeletonViewItems.length; i < numItems; i++) {
+            const step = i % 3;
+            let lineWidth;
+            switch (step) {
+                case 0:
+                    lineWidth = '100%';
+                    break;
+                case 1:
+                    lineWidth = '50%';
+                    break;
+                default:
+                    lineWidth = '25%';
+            }
+            skeletonViewItems.push(
+                <SkeletonViewContentLoader
+                    key={`skeletonViewItems${i}`}
+                    animate={this.props.shouldAnimate}
+                    height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
+                    backgroundColor={themeColors.borderLighter}
+                    foregroundColor={themeColors.border}
+                    style={styles.mr5}
+                >
+                    <Circle cx="40" cy="32" r="20" />
+                    <Rect x="72" y="18" width="20%" height="8" />
+                    <Rect x="72" y="38" width={lineWidth} height="8" />
+                </SkeletonViewContentLoader>,
+            );
         }
-        skeletonViewLines.push(
-            <SkeletonViewContentLoader
-                key={`skeletonViewLines${index}`}
-                animate={props.animate}
-                height={skeletonHeight}
-                backgroundColor={themeColors.borderLighter}
-                foregroundColor={themeColors.border}
-                style={styles.mr5}
+
+        this.setState(prevState => ({
+            skeletonViewItems: [...prevState.skeletonViewItems, ...skeletonViewItems],
+        }));
+    }
+
+    render() {
+        return (
+            <View
+                style={styles.flex1}
+                onLayout={(event) => {
+                    const numItems = Math.ceil(event.nativeEvent.layout.height / CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT);
+                    this.generateSkeletonViewItems(numItems);
+                }}
             >
-                <Circle cx="40" cy="32" r="20" />
-                <Rect x="72" y="18" width="20%" height="8" />
-                <Rect x="72" y="38" width={lineWidth} height="8" />
-            </SkeletonViewContentLoader>,
+                <View>{this.state.skeletonViewItems}</View>
+            </View>
         );
     }
-    return <View>{skeletonViewLines}</View>;
-};
+}
 
-LHNSkeletonView.displayName = 'LHNSkeletonView';
 LHNSkeletonView.propTypes = propTypes;
 LHNSkeletonView.defaultProps = defaultTypes;
+
 export default LHNSkeletonView;
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 6dbe4c561fd7..db84795d4177 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -89,9 +89,6 @@ const defaultProps = {
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
 };
 
-// Keep a reference to the screen height so we can use it when a new SidebarLinks component mounts
-let lhnListHeight = 0;
-
 class SidebarLinks extends React.Component {
     constructor(props) {
         super(props);
@@ -99,10 +96,6 @@ class SidebarLinks extends React.Component {
         this.showSearchPage = this.showSearchPage.bind(this);
         this.showSettingsPage = this.showSettingsPage.bind(this);
         this.showReportPage = this.showReportPage.bind(this);
-
-        this.state = {
-            skeletonViewContainerHeight: lhnListHeight,
-        };
     }
 
     showSearchPage() {
@@ -139,10 +132,9 @@ class SidebarLinks extends React.Component {
     render() {
         const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
         const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded;
-        const animatePlaceholder = !freeze;
         const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);
 
-        const skeletonPlaceholder = <LHNSkeletonView containerHeight={this.state.skeletonViewContainerHeight} animate={animatePlaceholder} />;
+        const skeletonPlaceholder = <LHNSkeletonView shouldAnimate={!freeze} />;
 
         return (
             <View
@@ -196,41 +188,26 @@ class SidebarLinks extends React.Component {
                     freeze={freeze}
                     placeholder={skeletonPlaceholder}
                 >
-                    <View
-                        style={styles.flex1}
-                        onLayout={(event) => {
-                            const skeletonViewContainerHeight = event.nativeEvent.layout.height;
-
-                            // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it
-                            // takes up so we can set the skeleton view container height.
-                            if (skeletonViewContainerHeight === 0) {
-                                return;
-                            }
-                            lhnListHeight = skeletonViewContainerHeight;
-                            this.setState({skeletonViewContainerHeight});
-                        }}
-                    >
-                        {isLoading ? skeletonPlaceholder : (
-                            <LHNOptionsList
-                                contentContainerStyles={[
-                                    styles.sidebarListContainer,
-                                    {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom},
-                                ]}
-                                data={optionListItems}
-                                focusedIndex={_.findIndex(optionListItems, (
-                                    option => option.toString() === this.props.reportIDFromRoute
-                                ))}
-                                onSelectRow={this.showReportPage}
-                                shouldDisableFocusOptions={this.props.isSmallScreenWidth}
-                                optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT}
-                                onLayout={() => {
-                                    this.props.onLayout();
-                                    App.setSidebarLoaded();
-                                    this.isSidebarLoaded = true;
-                                }}
-                            />
-                        )}
-                    </View>
+                    {isLoading ? skeletonPlaceholder : (
+                        <LHNOptionsList
+                            contentContainerStyles={[
+                                styles.sidebarListContainer,
+                                {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom},
+                            ]}
+                            data={optionListItems}
+                            focusedIndex={_.findIndex(optionListItems, (
+                                option => option.toString() === this.props.reportIDFromRoute
+                            ))}
+                            onSelectRow={this.showReportPage}
+                            shouldDisableFocusOptions={this.props.isSmallScreenWidth}
+                            optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT}
+                            onLayout={() => {
+                                this.props.onLayout();
+                                App.setSidebarLoaded();
+                                this.isSidebarLoaded = true;
+                            }}
+                        />
+                    )}
                 </Freeze>
             </View>
         );

From bbc9a66376ae039be88cefee05f2862fafb74fcb Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Mar 2023 18:58:01 -0800
Subject: [PATCH 23/26] fix lint

---
 src/components/LHNSkeletonView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js
index dfc03df482c5..efa7a629fe82 100644
--- a/src/components/LHNSkeletonView.js
+++ b/src/components/LHNSkeletonView.js
@@ -27,7 +27,7 @@ class LHNSkeletonView extends React.Component {
     /**
      * Generate the skeleton view items.
      *
-     * @param numItems
+     * @param {Number} numItems
      */
     generateSkeletonViewItems(numItems) {
         if (this.state.skeletonViewItems.length === numItems) {

From 3a660a53ca30f754d1b9875d96ae53e9c150e508 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 3 Mar 2023 22:18:03 -0800
Subject: [PATCH 24/26] add comment

---
 src/libs/Navigation/AppNavigator/MainDrawerNavigator.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
index e1c93d7543c5..9c8ae24a2749 100644
--- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
+++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js
@@ -94,6 +94,9 @@ class MainDrawerNavigator extends Component {
             return false;
         }
 
+        // Update the report screen initial params after the reports are available
+        // to show the correct report instead of the "no access" report.
+        // https://github.com/Expensify/App/issues/12698#issuecomment-1352632883
         if (!this.initialParams.reportID) {
             const state = this.props.navigation.getState();
             const reportScreenKey = lodashGet(state, 'routes[0].state.routes[0].key', '');

From 829b20efd9a6110968a45eebfaa82da4bcb68bef Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Mon, 6 Mar 2023 19:56:37 -0800
Subject: [PATCH 25/26] change variable name

---
 src/pages/home/sidebar/SidebarLinks.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index db84795d4177..8efd0412c9f9 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -131,10 +131,10 @@ class SidebarLinks extends React.Component {
 
     render() {
         const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
-        const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded;
+        const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded;
         const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);
 
-        const skeletonPlaceholder = <LHNSkeletonView shouldAnimate={!freeze} />;
+        const skeletonPlaceholder = <LHNSkeletonView shouldAnimate={!shouldFreeze} />;
 
         return (
             <View
@@ -185,7 +185,7 @@ class SidebarLinks extends React.Component {
                     </TouchableOpacity>
                 </View>
                 <Freeze
-                    freeze={freeze}
+                    freeze={shouldFreeze}
                     placeholder={skeletonPlaceholder}
                 >
                     {isLoading ? skeletonPlaceholder : (

From 5a8363ce11373a72ef09267857988db75a0e2386 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Mon, 13 Mar 2023 19:28:50 -0700
Subject: [PATCH 26/26] change variable name

---
 .../ReportActionsSkeletonView/SkeletonViewLines.js   |  6 +++---
 src/components/ReportActionsSkeletonView/index.js    | 10 +++++-----
 src/components/ReportHeaderSkeletonView.js           |  6 +++---
 src/pages/home/ReportScreen.js                       | 12 ++++++------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
index 30e96d5784dd..464bdffa6f53 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
@@ -9,16 +9,16 @@ import styles from '../../styles/styles';
 const propTypes = {
     /** Number of rows to show in Skeleton UI block */
     numberOfRows: PropTypes.number.isRequired,
-    animate: PropTypes.bool,
+    shouldAnimate: PropTypes.bool,
 };
 
 const defaultTypes = {
-    animate: true,
+    shouldAnimate: true,
 };
 
 const SkeletonViewLines = props => (
     <SkeletonViewContentLoader
-        animate={props.animate}
+        animate={props.shouldAnimate}
         height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
         backgroundColor={themeColors.highlightBG}
         foregroundColor={themeColors.border}
diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js
index 4f7055d98938..07fdb483466d 100644
--- a/src/components/ReportActionsSkeletonView/index.js
+++ b/src/components/ReportActionsSkeletonView/index.js
@@ -8,11 +8,11 @@ const propTypes = {
     containerHeight: PropTypes.number.isRequired,
 
     /** Whether to animate the skeleton view */
-    animate: PropTypes.bool,
+    shouldAnimate: PropTypes.bool,
 };
 
 const defaultProps = {
-    animate: true,
+    shouldAnimate: true,
 };
 
 const ReportActionsSkeletonView = (props) => {
@@ -23,13 +23,13 @@ const ReportActionsSkeletonView = (props) => {
         const iconIndex = (index + 1) % 4;
         switch (iconIndex) {
             case 2:
-                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={2} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines shouldAnimate={props.shouldAnimate} numberOfRows={2} key={`skeletonViewLines${index}`} />);
                 break;
             case 0:
-                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={3} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines shouldAnimate={props.shouldAnimate} numberOfRows={3} key={`skeletonViewLines${index}`} />);
                 break;
             default:
-                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={1} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines shouldAnimate={props.shouldAnimate} numberOfRows={1} key={`skeletonViewLines${index}`} />);
         }
     }
     return <>{skeletonViewLines}</>;
diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index fc303aad46db..040d883ca0b5 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -12,11 +12,11 @@ import themeColors from '../styles/themes/default';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
-    animate: PropTypes.bool,
+    shouldAnimate: PropTypes.bool,
 };
 
 const defaultProps = {
-    animate: true,
+    shouldAnimate: true,
 };
 
 const ReportHeaderSkeletonView = props => (
@@ -31,7 +31,7 @@ const ReportHeaderSkeletonView = props => (
                 </Pressable>
             )}
             <SkeletonViewContentLoader
-                animate={props.animate}
+                animate={props.shouldAnimate}
                 width={styles.w100.width}
                 height={variables.contentHeaderHeight}
                 backgroundColor={themeColors.highlightBG}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 957d5c9d2b6f..fd9df6f5745c 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -200,25 +200,25 @@ class ReportScreen extends React.Component {
         const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.report.isLoadingReportActions;
 
         // When the ReportScreen is not open/in the viewport, we want to "freeze" it for performance reasons
-        const freeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen;
+        const shouldFreeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen;
 
         const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails);
 
         // the moment the ReportScreen becomes unfrozen we want to start the animation of the placeholder skeleton content
         // (which is shown, until all the actual views of the ReportScreen have been rendered)
-        const animatePlaceholder = !freeze;
+        const shouldAnimate = !shouldFreeze;
 
         return (
             <ScreenWrapper
                 style={screenWrapperStyle}
             >
                 <Freeze
-                    freeze={freeze}
+                    freeze={shouldFreeze}
                     placeholder={(
                         <>
-                            <ReportHeaderSkeletonView animate={animatePlaceholder} />
+                            <ReportHeaderSkeletonView shouldAnimate={shouldAnimate} />
                             <View style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}>
-                                <ReportActionsSkeletonView animate={animatePlaceholder} containerHeight={this.state.skeletonViewContainerHeight} />
+                                <ReportActionsSkeletonView shouldAnimate={shouldAnimate} containerHeight={this.state.skeletonViewContainerHeight} />
                                 <ReportFooter shouldDisableCompose isOffline={this.props.network.isOffline} />
                             </View>
                         </>
@@ -233,7 +233,7 @@ class ReportScreen extends React.Component {
                             Navigation.navigate(ROUTES.HOME);
                         }}
                     >
-                        {isLoading ? <ReportHeaderSkeletonView animate={animatePlaceholder} /> : (
+                        {isLoading ? <ReportHeaderSkeletonView shouldAnimate={shouldAnimate} /> : (
                             <>
                                 <OfflineWithFeedback
                                     pendingAction={addWorkspaceRoomOrChatPendingAction}
