Merge pull request #36317 from bernhardoj/fix/35892-heaeder-skeleton-…

…spacong Fix report screen header skeleton spacing
Expensify · Feb 19, 2024 · 8f2ac76 · 8f2ac76
2 parents 8867d7c + ebca48a
commit 8f2ac76
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git 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
@@ -234,7 +234,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} />
                     ) : (