Merge pull request woocommerce/woocommerce-admin#2295 from woocommerce/fix/screen-meta-reflows

Prevent screen meta reflows

plugins/woocommerce-admin/client/embedded.js

@@ -13,14 +13,18 @@ import { EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
 import 'store';
 import 'wc-api/wp-data-store';
 
+const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
+
 // Render the header.
 render(
 	<SlotFillProvider>
 		<EmbedLayout />
 	</SlotFillProvider>,
-	document.getElementById( 'woocommerce-embedded-root' )
+	embeddedRoot
 );
 
+embeddedRoot.classList.remove( 'is-embed-loading' );
+
 // Render notices just above the WP content div.
 const wpBody = document.getElementById( 'wpbody-content' );
 const wrap = wpBody.querySelector( '.wrap' );

plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss

@@ -14,6 +14,18 @@
 		padding: 20px;
 	}
 
+	#woocommerce-embedded-root.is-embed-loading + #wpbody .wrap {
+		padding-top: $large-header-height + 40;
+
+		@include breakpoint( '782px-960px' ) {
+			padding-top: $medium-header-height + 40;
+		}
+
+		@include breakpoint( '<782px' ) {
+			padding-top: $small-header-height + 40;
+		}
+	}
+
 	#screen-meta,
 	#screen-meta-links {
 		top: $large-header-height;

plugins/woocommerce-admin/includes/class-wc-admin-loader.php

@@ -378,7 +378,7 @@ class WC_Admin_Loader {
 		$sections = self::get_embed_breadcrumbs();
 		$sections = is_array( $sections ) ? $sections : array( $sections );
 		?>
-		<div id="woocommerce-embedded-root">
+		<div id="woocommerce-embedded-root" class="is-embed-loading">
 			<div class="woocommerce-layout">
 				<div class="woocommerce-layout__header is-embed-loading">
 					<h1 class="woocommerce-layout__header-breadcrumbs">
@@ -391,9 +391,6 @@ class WC_Admin_Loader {
 					</h1>
 				</div>
 			</div>
-			<div class="woocommerce-layout__primary is-embed-loading" id="woocommerce-layout__primary">
-				<div id="woocommerce-layout__notice-list" class="woocommerce-layout__notice-list"></div>
-			</div>
 		</div>
 		<?php
 	}