From 20b9ba0a75bf64426483f7127d6cb6bb620d4392 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 16 Jan 2023 13:44:45 +0100
Subject: [PATCH] Update the site editor for better initialization (#47182)

---
 .../edit-site/src/components/block-editor/index.js   |  2 +-
 .../edit-site/src/components/block-editor/style.scss |  5 +++++
 .../edit-site/src/components/canvas-spinner/index.js | 12 ++++++++++++
 .../src/components/canvas-spinner/style.scss         |  7 +++++++
 packages/edit-site/src/components/editor/index.js    |  3 ++-
 .../global-styles/global-styles-provider.js          |  3 ++-
 packages/edit-site/src/style.scss                    |  1 +
 7 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 packages/edit-site/src/components/canvas-spinner/index.js
 create mode 100644 packages/edit-site/src/components/canvas-spinner/style.scss

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 49cab9aef912c..d4e6c4ed8e54a 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -204,7 +204,7 @@ export default function BlockEditor() {
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
-								height={ sizes.height }
+								height={ sizes.height ?? '100%' }
 							>
 								<EditorCanvas
 									enableResizing={ enableResizing }
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 0eca3b7c529b4..18072a6fa587d 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -27,6 +27,11 @@
 		height: 100%;
 	}
 
+	.edit-site-visual-editor__editor-canvas {
+		height: 100%;
+		background: $white;
+	}
+
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
 			padding: $grid-unit-60;
diff --git a/packages/edit-site/src/components/canvas-spinner/index.js b/packages/edit-site/src/components/canvas-spinner/index.js
new file mode 100644
index 0000000000000..d5fae75fd7d95
--- /dev/null
+++ b/packages/edit-site/src/components/canvas-spinner/index.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner } from '@wordpress/components';
+
+export default function CanvasSpinner() {
+	return (
+		<div className="edit-site-canvas-spinner">
+			<Spinner />
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/canvas-spinner/style.scss b/packages/edit-site/src/components/canvas-spinner/style.scss
new file mode 100644
index 0000000000000..3178cbaeec58d
--- /dev/null
+++ b/packages/edit-site/src/components/canvas-spinner/style.scss
@@ -0,0 +1,7 @@
+.edit-site-canvas-spinner {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 4f6ab66c9a2ce..6841716960202 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -37,6 +37,7 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
+import CanvasSpinner from '../canvas-spinner';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -149,7 +150,7 @@ export default function Editor() {
 	useTitle( isReady && __( 'Editor (beta)' ) );
 
 	if ( ! isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (
diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js
index 0813dc63b2cb8..68e190443d1f3 100644
--- a/packages/edit-site/src/components/global-styles/global-styles-provider.js
+++ b/packages/edit-site/src/components/global-styles/global-styles-provider.js
@@ -14,6 +14,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { GlobalStylesContext } from './context';
+import CanvasSpinner from '../canvas-spinner';
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
@@ -165,7 +166,7 @@ function useGlobalStylesContext() {
 export function GlobalStylesProvider( { children } ) {
 	const context = useGlobalStylesContext();
 	if ( ! context.isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index b98f6b817e368..ceb311f8cd0a4 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -1,6 +1,7 @@
 @import "../../interface/src/style.scss";
 
 @import "./components/block-editor/style.scss";
+@import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/header-edit-mode/style.scss";