Site Editor Loading: Use Suspense

packages/block-library/src/site-logo/edit.js

@@ -42,7 +42,7 @@ import {
 	store as blockEditorStore,
 	__experimentalImageEditor as ImageEditor,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useSuspenseSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { crop, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -84,7 +84,7 @@ const SiteLogo = ( {
 	const classes = classnames( 'custom-logo-link', {
 		'is-transient': isBlobURL( logoUrl ),
 	} );
-	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
+	const { imageEditing, maxWidth, title } = useSuspenseSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
 			'root',

packages/block-library/src/site-title/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSuspenseSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import {
@@ -29,7 +29,7 @@ export default function SiteTitleEdit( {
 	insertBlocksAfter,
 } ) {
 	const { level, textAlign, isLink, linkTarget } = attributes;
-	const { canUserEdit, title } = useSelect( ( select ) => {
+	const { canUserEdit, title } = useSuspenseSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
 		const canEdit = canUser( 'update', 'settings' );

packages/block-library/src/template-part/edit/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { serialize } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useSuspenseSelect } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
 	useBlockProps,
@@ -128,7 +128,7 @@ export default function TemplatePartEdit( {
 		area,
 		onNavigateToEntityRecord,
 		title,
-	} = useSelect(
+	} = useSuspenseSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );

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

@@ -31,6 +31,7 @@ import {
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
+import { Suspense } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -72,7 +73,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-export default function Editor( { isLoading, onClick } ) {
+function Editor( { onClick } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -168,23 +169,15 @@ export default function Editor( { isLoading, onClick } ) {
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URLQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
-
-	const loadingProgressId = useInstanceId(
-		CanvasLoader,
-		'edit-site-editor__loading-progress'
-	);
-
 	const { closeGeneralSidebar } = useDispatch( editSiteStore );
 
 	const settings = useSpecificEditorSettings();
 	const isReady =
-		! isLoading &&
-		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
-			( ! postWithTemplate && !! editedPost ) );
+		( postWithTemplate && !! contextPost && !! editedPost ) ||
+		( ! postWithTemplate && !! editedPost );
 
 	return (
 		<>
-			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (
 				<Notice status="warning" isDismissible={ false }>
@@ -278,3 +271,18 @@ export default function Editor( { isLoading, onClick } ) {
 		</>
 	);
 }
+
+function EditorWithLoader( props ) {
+	const loadingProgressId = useInstanceId(
+		CanvasLoader,
+		'edit-site-editor__loading-progress'
+	);
+
+	return (
+		<Suspense fallback={ <CanvasLoader id={ loadingProgressId } /> }>
+			<Editor { ...props } />
+		</Suspense>
+	);
+}
+
+export default EditorWithLoader;

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

@@ -49,7 +49,6 @@ import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
-import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
 
@@ -112,7 +111,6 @@ export default function Layout() {
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
-	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
 	const { key: routeKey, areas, widths } = useLayoutAreas();
@@ -333,7 +331,6 @@ export default function Layout() {
 								>
 									<ErrorBoundary>
 										<ResizableFrame
-											isReady={ ! isEditorLoading }
 											isFullWidth={
 												canvasMode === 'edit'
 											}

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

@@ -7,7 +7,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { useIsSiteEditorLoading } from './hooks';
 import Editor from '../editor';
 import PagePages from '../page-pages';
 import PagePatterns from '../page-patterns';
@@ -21,7 +20,6 @@ import {
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function useLayoutAreas() {
-	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const history = useHistory();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
@@ -38,7 +36,6 @@ export default function useLayoutAreas() {
 				content: <PagePages />,
 				preview: isListLayout && (
 					<Editor
-						isLoading={ isSiteEditorLoading }
 						onClick={ () =>
 							history.push( {
 								path,
@@ -49,10 +46,7 @@ export default function useLayoutAreas() {
 						}
 					/>
 				),
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : undefined,
+				mobile: canvas === 'edit' ? <Editor /> : undefined,
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -65,11 +59,8 @@ export default function useLayoutAreas() {
 		return {
 			key: 'page',
 			areas: {
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : undefined,
+				preview: <Editor />,
+				mobile: canvas === 'edit' ? <Editor /> : undefined,
 			},
 		};
 	}
@@ -85,9 +76,7 @@ export default function useLayoutAreas() {
 						postType={ TEMPLATE_POST_TYPE }
 					/>
 				),
-				preview: isListLayout && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				preview: isListLayout && <Editor />,
 				mobile: (
 					<PageTemplatesTemplateParts
 						postType={ TEMPLATE_POST_TYPE }
@@ -111,9 +100,7 @@ export default function useLayoutAreas() {
 						postType={ TEMPLATE_PART_POST_TYPE }
 					/>
 				),
-				preview: isListLayout && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				preview: isListLayout && <Editor />,
 				mobile: (
 					<PageTemplatesTemplateParts
 						postType={ TEMPLATE_PART_POST_TYPE }
@@ -141,11 +128,8 @@ export default function useLayoutAreas() {
 	return {
 		key: 'default',
 		areas: {
-			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile:
-				canvas === 'edit' ? (
-					<Editor isLoading={ isSiteEditorLoading } />
-				) : undefined,
+			preview: <Editor />,
+			mobile: canvas === 'edit' ? <Editor /> : undefined,
 		},
 	};
 }

packages/edit-site/src/components/resizable-frame/index.js

@@ -80,7 +80,6 @@ function ResizableFrame( {
 	isFullWidth,
 	isOversized,
 	setIsOversized,
-	isReady,
 	children,
 	/** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */
 	defaultSize,
@@ -235,8 +234,7 @@ function ResizableFrame( {
 				top: false,
 				right: false,
 				bottom: false,
-				// Resizing will be disabled until the editor content is loaded.
-				left: isReady,
+				left: true,
 				topRight: false,
 				bottomRight: false,
 				bottomLeft: false,