From 563f076798c0e17ed05de0259f6d17146df73295 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Mon, 12 Feb 2024 17:15:40 +0800
Subject: [PATCH 1/3] don't apply padding if loading

---
 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 29f2264dc77d..d02e2eb76d9f 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -217,7 +217,7 @@ function HeaderView(props) {
             dataSet={{dragArea: true}}
         >
             <View style={[styles.appContentHeader, !isSmallScreenWidth && styles.headerBarDesktopHeight]}>
-                <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
+                <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && !isLoading && styles.pl5]}>
                     {isLoading ? (
                         <ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />
                     ) : (

From b4ee4f23f9f9b713bd3651f5e2ee735e4dce647b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 14 Feb 2024 11:59:22 +0800
Subject: [PATCH 2/3] fix skeleton vertical position

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

diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 5332e0c5032c..109904e5b589 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -5,7 +5,6 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -22,9 +21,12 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const smallScreenHeight = styles.appContentHeader.height;
+    const height = !isSmallScreenWidth ? styles.headerBarDesktopHeight.height : smallScreenHeight;
+    const heightDiff = height - smallScreenHeight;
 
     return (
-        <View style={[styles.appContentHeader, isSmallScreenWidth && styles.pl2]}>
+        <View style={[styles.appContentHeader, isSmallScreenWidth && styles.pl2, styles.h100]}>
             <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
                 {isSmallScreenWidth && (
                     <PressableWithFeedback
@@ -42,24 +44,24 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
                 <SkeletonViewContentLoader
                     animate={shouldAnimate}
                     width={styles.w100.width}
-                    height={variables.contentHeaderHeight}
+                    height={height}
                     backgroundColor={theme.highlightBG}
                     foregroundColor={theme.border}
                 >
                     <Circle
                         cx="20"
-                        cy="40"
+                        cy={height / 2}
                         r="20"
                     />
                     <Rect
                         x="55"
-                        y="28"
+                        y={24 + heightDiff / 2}
                         width="30%"
                         height="8"
                     />
                     <Rect
                         x="55"
-                        y="48"
+                        y={44 + heightDiff / 2}
                         width="40%"
                         height="8"
                     />

From ebca48acf1636bad7f64bd01f419636497307fc6 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 14 Feb 2024 12:21:20 +0800
Subject: [PATCH 3/3] fix skeleton vertical position

---
 src/components/ReportHeaderSkeletonView.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 109904e5b589..bc4eef675170 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -23,7 +23,10 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
     const {isSmallScreenWidth} = useWindowDimensions();
     const smallScreenHeight = styles.appContentHeader.height;
     const height = !isSmallScreenWidth ? styles.headerBarDesktopHeight.height : smallScreenHeight;
-    const heightDiff = height - smallScreenHeight;
+    const radius = 20;
+    const circleY = height / 2;
+    const circleTopY = circleY - radius;
+    const circleBottomY = circleY + radius;
 
     return (
         <View style={[styles.appContentHeader, isSmallScreenWidth && styles.pl2, styles.h100]}>
@@ -51,17 +54,17 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
                     <Circle
                         cx="20"
                         cy={height / 2}
-                        r="20"
+                        r={radius}
                     />
                     <Rect
                         x="55"
-                        y={24 + heightDiff / 2}
+                        y={circleTopY + 8}
                         width="30%"
                         height="8"
                     />
                     <Rect
                         x="55"
-                        y={44 + heightDiff / 2}
+                        y={circleBottomY - 12}
                         width="40%"
                         height="8"
                     />