diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 5332e0c5032c..bc4eef675170 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,15 @@ 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 radius = 20;
+    const circleY = height / 2;
+    const circleTopY = circleY - radius;
+    const circleBottomY = circleY + radius;
 
     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 +47,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"
-                        r="20"
+                        cy={height / 2}
+                        r={radius}
                     />
                     <Rect
                         x="55"
-                        y="28"
+                        y={circleTopY + 8}
                         width="30%"
                         height="8"
                     />
                     <Rect
                         x="55"
-                        y="48"
+                        y={circleBottomY - 12}
                         width="40%"
                         height="8"
                     />
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} />
                     ) : (