From 59b7e178a19a3ee994c6b54f6888969ac2112a92 Mon Sep 17 00:00:00 2001
From: Adam Grzybowski <adam.grzybowski@swmansion.com>
Date: Wed, 25 Oct 2023 19:13:09 +0200
Subject: [PATCH 1/8] add ReportHeaderSkeletonView to ReportScreen

---
 src/components/ReportHeaderSkeletonView.js | 2 +-
 src/pages/home/ReportScreen.js             | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index 5f2d5379419d..3d24442f3c4c 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -26,7 +26,7 @@ const defaultProps = {
 
 function ReportHeaderSkeletonView(props) {
     return (
-        <View style={[styles.appContentHeader]}>
+        <View style={[styles.appContentHeader, styles.borderBottom]}>
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {props.isSmallScreenWidth && (
                     <PressableWithFeedback
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 32a14303e9a7..808b69661ab8 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -40,6 +40,7 @@ import usePrevious from '../../hooks/usePrevious';
 import CONST from '../../CONST';
 import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../../components/withCurrentReportID';
 import reportWithoutHasDraftSelector from '../../libs/OnyxSelectors/reportWithoutHasDraftSelector';
+import ReportHeaderSkeletonView from '../../components/ReportHeaderSkeletonView';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -214,6 +215,10 @@ function ReportScreen({
         );
     }
 
+    if (reportID === '') {
+        headerView = <ReportHeaderSkeletonView />;
+    }
+
     /**
      * When false the ReportActionsView will completely unmount and we will show a loader until it returns true.
      *

From ac217d0631359bf52690d3a31a132ba250f729b2 Mon Sep 17 00:00:00 2001
From: Adam Grzybowski <adam.grzybowski@swmansion.com>
Date: Mon, 30 Oct 2023 13:00:06 +0100
Subject: [PATCH 2/8] add isLoading to condition for skeleton header

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

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 67b3ab6080f6..a8b0e9112b98 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -220,7 +220,7 @@ function ReportScreen({
         );
     }
 
-    if (reportID === '') {
+    if (reportID === '' || isLoading) {
         headerView = <ReportHeaderSkeletonView />;
     }
 

From c4219a372e05d4a952b57a5dbb32f7cf0fbd9c43 Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Mon, 13 Nov 2023 16:21:49 +0100
Subject: [PATCH 3/8] Add isLoading to HeaderView

---
 src/pages/home/HeaderView.js   | 9 +++++++--
 src/pages/home/ReportScreen.js | 5 +----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 27ee820de02f..2d80c0acd996 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -13,6 +13,7 @@ import MultipleAvatars from '@components/MultipleAvatars';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
 import participantPropTypes from '@components/participantPropTypes';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
 import Text from '@components/Text';
@@ -172,12 +173,14 @@ function HeaderView(props) {
     const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
     const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);
 
+    const isLoading = !(props.report && title);
+
     return (
         <View
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
+            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && !isLoading && styles.pl5]}>
                 {props.isSmallScreenWidth && (
                     <PressableWithoutFeedback
                         onPress={props.onNavigationMenuButtonClicked}
@@ -196,7 +199,9 @@ function HeaderView(props) {
                         </Tooltip>
                     </PressableWithoutFeedback>
                 )}
-                {Boolean(props.report && title) && (
+                {isLoading ? (
+                    <ReportHeaderSkeletonView />
+                ) : (
                     <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <PressableWithoutFeedback
                             onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index f15171a098c9..047456eede02 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -169,7 +169,7 @@ function ReportScreen({
     const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.CLOSED;
 
     const shouldHideReport = !ReportUtils.canAccessReport(report, policies, betas);
-
+    
     const isLoading = !reportID || !isSidebarLoaded || _.isEmpty(personalDetails);
 
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
@@ -217,9 +217,6 @@ function ReportScreen({
         );
     }
 
-    if (reportID === '' || isLoading) {
-        headerView = <ReportHeaderSkeletonView />;
-    }
 
     /**
      * When false the ReportActionsView will completely unmount and we will show a loader until it returns true.

From e82fd1b2e0b69a4cc7bb6c6babd8941c36cc601d Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Thu, 16 Nov 2023 09:50:02 +0100
Subject: [PATCH 4/8] Refactor isLoading in HeaderView

---
 src/pages/home/HeaderView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 2d80c0acd996..9285940ae9c7 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -173,7 +173,7 @@ function HeaderView(props) {
     const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
     const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);
 
-    const isLoading = !(props.report && title);
+    const isLoading = !props.report || !title;
 
     return (
         <View

From 84ea486120392a08175fc1c921941a8be9695430 Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Thu, 16 Nov 2023 09:54:22 +0100
Subject: [PATCH 5/8] Lint fixes

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

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 047456eede02..7abf395644f8 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -11,7 +11,6 @@ import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
-import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
@@ -169,7 +168,7 @@ function ReportScreen({
     const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.CLOSED;
 
     const shouldHideReport = !ReportUtils.canAccessReport(report, policies, betas);
-    
+
     const isLoading = !reportID || !isSidebarLoaded || _.isEmpty(personalDetails);
 
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
@@ -217,7 +216,6 @@ function ReportScreen({
         );
     }
 
-
     /**
      * When false the ReportActionsView will completely unmount and we will show a loader until it returns true.
      *

From df175688767d64e8027c028216c08309e0ec8e31 Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Thu, 16 Nov 2023 11:53:13 +0100
Subject: [PATCH 6/8] Fix showing a back button when header is loading

---
 src/components/ReportHeaderSkeletonView.js |   2 +-
 src/pages/home/HeaderView.js               | 158 +++++++++++----------
 2 files changed, 81 insertions(+), 79 deletions(-)

diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index b28becf7f147..94fc01802323 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -26,7 +26,7 @@ const defaultProps = {
 
 function ReportHeaderSkeletonView(props) {
     return (
-        <View style={[styles.appContentHeader, styles.borderBottom]}>
+        <View style={styles.appContentHeader}>
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {props.isSmallScreenWidth && (
                     <PressableWithFeedback
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 9285940ae9c7..d7eaf11e7ffc 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -180,93 +180,95 @@ function HeaderView(props) {
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && !isLoading && styles.pl5]}>
-                {props.isSmallScreenWidth && (
-                    <PressableWithoutFeedback
-                        onPress={props.onNavigationMenuButtonClicked}
-                        style={[styles.LHNToggle]}
-                        accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
-                        accessibilityLabel={props.translate('common.back')}
-                        role={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                    >
-                        <Tooltip
-                            text={props.translate('common.back')}
-                            shiftVertical={4}
-                        >
-                            <View>
-                                <Icon src={Expensicons.BackArrow} />
-                            </View>
-                        </Tooltip>
-                    </PressableWithoutFeedback>
-                )}
+            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {isLoading ? (
                     <ReportHeaderSkeletonView />
                 ) : (
-                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                        <PressableWithoutFeedback
-                            onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
-                            style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
-                            disabled={shouldDisableDetailPage}
-                            accessibilityLabel={title}
-                            role={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                        >
-                            {shouldShowSubscript ? (
-                                <SubscriptAvatar
-                                    mainAvatar={icons[0]}
-                                    secondaryAvatar={icons[1]}
-                                    size={defaultSubscriptSize}
-                                />
-                            ) : (
-                                <MultipleAvatars
-                                    icons={icons}
-                                    shouldShowTooltip={!isChatRoom || isChatThread}
-                                />
-                            )}
-                            <View style={[styles.flex1, styles.flexColumn]}>
-                                <DisplayNames
-                                    fullTitle={title}
-                                    displayNamesWithTooltips={displayNamesWithTooltips}
-                                    tooltipEnabled
-                                    numberOfLines={1}
-                                    textStyles={[styles.headerText, styles.pre]}
-                                    shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
-                                />
-                                {!_.isEmpty(parentNavigationSubtitleData) && (
-                                    <ParentNavigationSubtitle
-                                        parentNavigationSubtitleData={parentNavigationSubtitleData}
-                                        parentReportID={props.report.parentReportID}
-                                        pressableStyles={[styles.alignSelfStart, styles.mw100]}
+                    <>
+                        {props.isSmallScreenWidth && (
+                            <PressableWithoutFeedback
+                                onPress={props.onNavigationMenuButtonClicked}
+                                style={[styles.LHNToggle]}
+                                accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
+                                accessibilityLabel={props.translate('common.back')}
+                                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                            >
+                                <Tooltip
+                                    text={props.translate('common.back')}
+                                    shiftVertical={4}
+                                >
+                                    <View>
+                                        <Icon src={Expensicons.BackArrow} />
+                                    </View>
+                                </Tooltip>
+                            </PressableWithoutFeedback>
+                        )}
+                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                            <PressableWithoutFeedback
+                                onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
+                                style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
+                                disabled={shouldDisableDetailPage}
+                                accessibilityLabel={title}
+                                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                            >
+                                {shouldShowSubscript ? (
+                                    <SubscriptAvatar
+                                        mainAvatar={icons[0]}
+                                        secondaryAvatar={icons[1]}
+                                        size={defaultSubscriptSize}
+                                    />
+                                ) : (
+                                    <MultipleAvatars
+                                        icons={icons}
+                                        shouldShowTooltip={!isChatRoom || isChatThread}
                                     />
                                 )}
-                                {!_.isEmpty(subtitle) && (
-                                    <Text
-                                        style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
+                                <View style={[styles.flex1, styles.flexColumn]}>
+                                    <DisplayNames
+                                        fullTitle={title}
+                                        displayNamesWithTooltips={displayNamesWithTooltips}
+                                        tooltipEnabled
                                         numberOfLines={1}
-                                    >
-                                        {subtitle}
-                                    </Text>
-                                )}
-                            </View>
-                            {brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
-                                <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
-                                    <Icon
-                                        src={Expensicons.DotIndicator}
-                                        fill={themeColors.danger}
+                                        textStyles={[styles.headerText, styles.pre]}
+                                        shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
                                     />
+                                    {!_.isEmpty(parentNavigationSubtitleData) && (
+                                        <ParentNavigationSubtitle
+                                            parentNavigationSubtitleData={parentNavigationSubtitleData}
+                                            parentReportID={props.report.parentReportID}
+                                            pressableStyles={[styles.alignSelfStart, styles.mw100]}
+                                        />
+                                    )}
+                                    {!_.isEmpty(subtitle) && (
+                                        <Text
+                                            style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
+                                            numberOfLines={1}
+                                        >
+                                            {subtitle}
+                                        </Text>
+                                    )}
                                 </View>
-                            )}
-                        </PressableWithoutFeedback>
-                        <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                            {isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
-                            {shouldShowThreeDotsButton && (
-                                <ThreeDotsMenu
-                                    anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
-                                    menuItems={threeDotMenuItems}
-                                    shouldSetModalVisibility={false}
-                                />
-                            )}
+                                {brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
+                                    <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                                        <Icon
+                                            src={Expensicons.DotIndicator}
+                                            fill={themeColors.danger}
+                                        />
+                                    </View>
+                                )}
+                            </PressableWithoutFeedback>
+                            <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
+                                {isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
+                                {shouldShowThreeDotsButton && (
+                                    <ThreeDotsMenu
+                                        anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
+                                        menuItems={threeDotMenuItems}
+                                        shouldSetModalVisibility={false}
+                                    />
+                                )}
+                            </View>
                         </View>
-                    </View>
+                    </>
                 )}
             </View>
         </View>

From 3886c8421a8201386ac59dc326d6124edc21beff Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Thu, 16 Nov 2023 12:07:53 +0100
Subject: [PATCH 7/8] Refactor ReportHeaderSkeletonView

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

diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index ecb21d98b07b..e0ef3f4257e3 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -28,7 +28,7 @@ function ReportHeaderSkeletonView(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     return (
-        <View style={styles.appContentHeader}>
+        <View style={[styles.appContentHeader]}>
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {props.isSmallScreenWidth && (
                     <PressableWithFeedback

From 175aa5c852f5fcc40c1082c0b96e8e3119b30530 Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Fri, 17 Nov 2023 08:50:29 +0100
Subject: [PATCH 8/8] Fix HeaderView styles

---
 src/pages/home/HeaderView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 1f61375832eb..d566d0a3230b 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -183,7 +183,7 @@ function HeaderView(props) {
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
+            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && !isLoading && styles.pl5]}>
                 {isLoading ? (
                     <ReportHeaderSkeletonView />
                 ) : (