Preventing desktop-sized navigation placeholder from appearing on mobile during load (https://github.com/woocommerce/woocommerce-admin/pull/5616)

plugins/woocommerce-admin/client/navigation/components/header/index.js

@@ -19,17 +19,35 @@ const Header = () => {
 	const siteTitle = getSetting( 'siteTitle', '' );
 	const siteUrl = getSetting( 'siteUrl', '' );
 	const isScrolled = useIsScrolled();
+	const navClasses = {
+		folded: 'is-folded',
+		expanded: 'is-expanded',
+	};
+
+	const foldNav = () => {
+		document.body.classList.add( navClasses.folded );
+		document.body.classList.remove( navClasses.expanded );
+	};
+
+	const expandNav = () => {
+		document.body.classList.remove( navClasses.folded );
+		document.body.classList.add( navClasses.expanded );
+	};
 
 	const toggleFolded = () => {
-		document.body.classList.toggle( 'is-folded' );
+		if ( document.body.classList.contains( navClasses.folded ) ) {
+			expandNav();
+		} else {
+			foldNav();
+		}
 	};
 
 	const foldOnMobile = ( screenWidth = document.body.clientWidth ) => {
-		const isSmallScreen = screenWidth <= 960;
-
-		document.body.classList[ isSmallScreen ? 'add' : 'remove' ](
-			'is-folded'
-		);
+		if ( screenWidth <= 960 ) {
+			foldNav();
+		} else {
+			expandNav();
+		}
 	};
 
 	useEffect( () => {

plugins/woocommerce-admin/client/navigation/style.scss

@@ -11,6 +11,15 @@
 		display: none !important;
 	}
 
+	#wpcontent,
+	#wpfooter {
+		margin-left: $navigation-width;
+
+		@media ( max-width: 960px ) {
+			margin-left: 0;
+		}
+	}
+
 	#woocommerce-embedded-navigation {
 		position: fixed;
 		top: 0;
@@ -20,6 +29,11 @@
 		box-sizing: border-box;
 		background-color: $gray-900;
 		z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header
+
+		@media ( max-width: 960px ) {
+			width: $header-height;
+			height: $header-height;
+		}
 	}
 
 	.woocommerce-navigation__wrapper {
@@ -31,14 +45,10 @@
 		box-sizing: border-box;
 	}
 
-	&:not(.is-folded) {
-		#wpcontent,
-		#wpfooter {
-			margin-left: $navigation-width;
-
-			@media ( max-width: 960px ) {
-				margin-left: 0;
-			}
+	&.is-expanded {
+		#woocommerce-embedded-navigation {
+			width: $navigation-width;
+			height: 100%;
 		}
 	}