Update frame resizing

packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts

@@ -54,4 +54,9 @@ export async function visitSiteEditor(
 		.locator( 'body > *' )
 		.first()
 		.waitFor();
+
+	// TODO: Ideally the content underneath the spinner should be marked inert until it's ready.
+	await this.page
+		.locator( '.edit-site-canvas-spinner' )
+		.waitFor( { state: 'hidden' } );
 }

packages/e2e-test-utils-playwright/src/editor/site-editor.ts

@@ -9,15 +9,25 @@ import type { Editor } from './index';
  * @param this
  */
 export async function saveSiteEditorEntities( this: Editor ) {
-	await this.page.click(
-		'role=region[name="Editor top bar"i] >> role=button[name="Save"i]'
-	);
+	const editorTopBar = this.page.getByRole( 'region', {
+		name: 'Editor top bar',
+	} );
+	const savePanel = this.page.getByRole( 'region', { name: 'Save panel' } );
+
+	// First Save button in the top bar.
+	await editorTopBar
+		.getByRole( 'button', { name: 'Save', exact: true } )
+		.click();
+
 	// Second Save button in the entities panel.
-	await this.page.click(
-		'role=region[name="Save panel"i] >> role=button[name="Save"i]'
-	);
+	await savePanel
+		.getByRole( 'button', { name: 'Save', exact: true } )
+		.click();
+
 	// A role selector cannot be used here because it needs to check that the `is-busy` class is not present.
-	await this.page.waitForSelector( '[aria-label="Saved"].is-busy', {
-		state: 'hidden',
-	} );
+	await this.page
+		.locator( '[aria-label="Editor top bar"] [aria-label="Saved"].is-busy' )
+		.waitFor( {
+			state: 'hidden',
+		} );
 }

packages/edit-site/src/components/editor/index.js

@@ -1,10 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
@@ -50,42 +55,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-function useIsSiteEditorLoading() {
-	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
-	const [ loaded, setLoaded ] = useState( false );
-	const inLoadingPause = useSelect(
-		( select ) => {
-			const hasResolvingSelectors =
-				select( coreStore ).hasResolvingSelectors();
-			return ! loaded && ! hasResolvingSelectors;
-		},
-		[ loaded ]
-	);
-
-	useEffect( () => {
-		if ( inLoadingPause ) {
-			/*
-			 * We're using an arbitrary 1s timeout here to catch brief moments
-			 * without any resolving selectors that would result in displaying
-			 * brief flickers of loading state and loaded state.
-			 *
-			 * It's worth experimenting with different values, since this also
-			 * adds 1s of artificial delay after loading has finished.
-			 */
-			const timeout = setTimeout( () => {
-				setLoaded( true );
-			}, 1000 );
-
-			return () => {
-				clearTimeout( timeout );
-			};
-		}
-	}, [ inLoadingPause ] );
-
-	return ! loaded || ! hasLoadedPost;
-}
-
-export default function Editor() {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -188,8 +158,6 @@ export default function Editor() {
 	// action in <URlQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
-	const isLoading = useIsSiteEditorLoading();
-
 	return (
 		<>
 			{ isLoading ? <CanvasSpinner /> : null }
@@ -205,7 +173,13 @@ export default function Editor() {
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
 							enableRegionNavigation={ false }
-							className={ showIconLabels && 'show-icon-labels' }
+							className={ classnames(
+								'edit-site-editor__interface-skeleton',
+								{
+									'show-icon-labels': showIconLabels,
+									'is-loading': isLoading,
+								}
+							) }
 							notices={
 								( isEditMode ||
 									window?.__experimentalEnableThemePreviews ) && (

packages/edit-site/src/components/editor/style.scss

@@ -1,3 +1,13 @@
+.edit-site-editor__interface-skeleton {
+	opacity: 1;
+	transition: opacity 0.1s ease-out;
+	@include reduce-motion("transition");
+
+	&.is-loading {
+		opacity: 0;
+	}
+}
+
 .edit-site-editor__toggle-save-panel {
 	box-sizing: border-box;
 	width: $sidebar-width;

packages/edit-site/src/components/layout/hooks.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+export function useIsSiteEditorLoading() {
+	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
+	const [ loaded, setLoaded ] = useState( false );
+	const inLoadingPause = useSelect(
+		( select ) => {
+			const hasResolvingSelectors =
+				select( coreStore ).hasResolvingSelectors();
+			return ! loaded && ! hasResolvingSelectors;
+		},
+		[ loaded ]
+	);
+
+	useEffect( () => {
+		if ( inLoadingPause ) {
+			/*
+			 * We're using an arbitrary 1s timeout here to catch brief moments
+			 * without any resolving selectors that would result in displaying
+			 * brief flickers of loading state and loaded state.
+			 *
+			 * It's worth experimenting with different values, since this also
+			 * adds 1s of artificial delay after loading has finished.
+			 */
+			const timeout = setTimeout( () => {
+				setLoaded( true );
+			}, 1000 );
+
+			return () => {
+				clearTimeout( timeout );
+			};
+		}
+	}, [ inLoadingPause ] );
+
+	return ! loaded || ! hasLoadedPost;
+}