Improve PagePanels performance

packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+export default function EditTemplate() {
+	const { context, hasResolved, title, blocks } = useSelect( ( select ) => {
+		const { getEditedPostContext, getEditedPostType, getEditedPostId } =
+			select( editSiteStore );
+		const { getEditedEntityRecord, hasFinishedResolution } =
+			select( coreStore );
+		const _context = getEditedPostContext();
+		const queryArgs = [
+			'postType',
+			getEditedPostType(),
+			getEditedPostId(),
+		];
+		const template = getEditedEntityRecord( ...queryArgs );
+		return {
+			context: _context,
+			hasResolved: hasFinishedResolution(
+				'getEditedEntityRecord',
+				queryArgs
+			),
+			title: template?.title,
+			blocks: template?.blocks,
+		};
+	}, [] );
+
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	const blockContext = useMemo(
+		() => ( { ...context, postType: null, postId: null } ),
+		[ context ]
+	);
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	return (
+		<VStack>
+			<div>{ decodeEntities( title ) }</div>
+			<div className="edit-site-page-panels__edit-template-preview">
+				<BlockContextProvider value={ blockContext }>
+					<BlockPreview viewportWidth={ 1024 } blocks={ blocks } />
+				</BlockContextProvider>
+			</div>
+			<Button
+				className="edit-site-page-panels__edit-template-button"
+				variant="secondary"
+				onClick={ () => setHasPageContentFocus( false ) }
+			>
+				{ __( 'Edit template' ) }
+			</Button>
+		</VStack>
+	);
+}

packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js

@@ -1,88 +1,62 @@
 /**
  * WordPress dependencies
  */
-import {
-	PanelBody,
-	__experimentalVStack as VStack,
-	Button,
-} from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { page as pageIcon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEntityRecord } from '@wordpress/core-data';
-import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import useEditedEntityRecord from '../../use-edited-entity-record';
 import SidebarCard from '../sidebar-card';
 import PageContent from './page-content';
+import EditTemplate from './edit-template';
 
 export default function PagePanels() {
-	const context = useSelect(
-		( select ) => select( editSiteStore ).getEditedPostContext(),
-		[]
-	);
-
-	const { hasResolved: hasPageResolved, editedRecord: page } =
-		useEntityRecord( 'postType', context.postType, context.postId );
-
-	const {
-		isLoaded: isTemplateLoaded,
-		getTitle: getTemplateTitle,
-		record: template,
-	} = useEditedEntityRecord();
-
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
-
-	const blockContext = useMemo(
-		() => ( { ...context, postType: null, postId: null } ),
-		[ context ]
-	);
-
-	if ( ! hasPageResolved || ! isTemplateLoaded ) {
+	const { hasResolved, title, modified } = useSelect( ( select ) => {
+		const { getEditedPostContext } = select( editSiteStore );
+		const { getEditedEntityRecord, hasFinishedResolution } =
+			select( coreStore );
+		const context = getEditedPostContext();
+		const queryArgs = [ 'postType', context.postType, context.postId ];
+		const page = getEditedEntityRecord( ...queryArgs );
+		return {
+			hasResolved: hasFinishedResolution(
+				'getEditedEntityRecord',
+				queryArgs
+			),
+			title: page?.title,
+			modified: page?.modified,
+		};
+	}, [] );
+
+	if ( ! hasResolved ) {
 		return null;
 	}
 
 	return (
 		<>
 			<PanelBody>
 				<SidebarCard
-					title={ page.title }
+					title={ decodeEntities( title ) }
 					icon={ pageIcon }
 					description={ sprintf(
 						// translators: %s: Human-readable time difference, e.g. "2 days ago".
 						__( 'Last edited %s' ),
-						humanTimeDiff( page.modified )
+						humanTimeDiff( modified )
 					) }
 				/>
 			</PanelBody>
 			<PanelBody title={ __( 'Content' ) }>
 				<PageContent />
 			</PanelBody>
 			<PanelBody title={ __( 'Template' ) }>
-				<VStack>
-					<div>{ getTemplateTitle() }</div>
-					<div className="edit-site-page-panels__edit-template-preview">
-						<BlockContextProvider value={ blockContext }>
-							<BlockPreview
-								viewportWidth={ 1024 }
-								blocks={ template.blocks }
-							/>
-						</BlockContextProvider>
-					</div>
-					<Button
-						className="edit-site-page-panels__edit-template-button"
-						variant="secondary"
-						onClick={ () => setHasPageContentFocus( false ) }
-					>
-						{ __( 'Edit template' ) }
-					</Button>
-				</VStack>
+				<EditTemplate />
 			</PanelBody>
 		</>
 	);