Performance: Optimize the AddTemplate component used in data views pa…

…ges (#60586) Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · Apr 9, 2024 · 5e99454 · 5e99454
1 parent d579009
commit 5e99454
Show file tree

Hide file tree

Showing 8 changed files with 453 additions and 523 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
@@ -96,28 +96,6 @@
 	}
 }
 
-.edit-site-template-actions-loading-screen-modal {
-	backdrop-filter: none;
-	background-color: transparent;
-
-	&.is-full-screen {
-		background-color: $white;
-		box-shadow: 0 0 0 transparent;
-		min-width: 100%;
-		min-height: 100%;
-	}
-
-	&__content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
 .edit-site-add-new-template__modal {
 	max-width: $grid-unit-80 * 13;
 	width: calc(100% - #{$grid-unit-80});

diff --git a/packages/edit-site/src/components/add-new-template/template-actions-loading-screen.js b/packages/edit-site/src/components/add-new-template/template-actions-loading-screen.js
diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js
@@ -14,6 +14,8 @@ import { blockMeta, post, archive } from '@wordpress/icons';
  */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
+const EMPTY_OBJECT = {};
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
@@ -622,41 +624,57 @@ const useTemplatesToExclude = (
 const useEntitiesInfo = (
 	entityName,
 	templatePrefixes,
-	additionalQueryParameters = {}
+	additionalQueryParameters = EMPTY_OBJECT
 ) => {
 	const recordsToExcludePerEntity = useTemplatesToExclude(
 		entityName,
 		templatePrefixes,
 		additionalQueryParameters
 	);
-	const entitiesInfo = useSelect(
+	const entitiesHasRecords = useSelect(
 		( select ) => {
 			return Object.keys( templatePrefixes || {} ).reduce(
 				( accumulator, slug ) => {
 					const existingEntitiesIds =
 						recordsToExcludePerEntity?.[ slug ]?.map(
 							( { id } ) => id
 						) || [];
-					accumulator[ slug ] = {
-						hasEntities: !! select( coreStore ).getEntityRecords(
-							entityName,
-							slug,
-							{
-								per_page: 1,
-								_fields: 'id',
-								context: 'view',
-								exclude: existingEntitiesIds,
-								...additionalQueryParameters[ slug ],
-							}
-						)?.length,
-						existingEntitiesIds,
-					};
+					accumulator[ slug ] = !! select(
+						coreStore
+					).getEntityRecords( entityName, slug, {
+						per_page: 1,
+						_fields: 'id',
+						context: 'view',
+						exclude: existingEntitiesIds,
+						...additionalQueryParameters[ slug ],
+					} )?.length;
 					return accumulator;
 				},
 				{}
 			);
 		},
-		[ templatePrefixes, recordsToExcludePerEntity ]
+		[
+			templatePrefixes,
+			recordsToExcludePerEntity,
+			entityName,
+			additionalQueryParameters,
+		]
 	);
+	const entitiesInfo = useMemo( () => {
+		return Object.keys( templatePrefixes || {} ).reduce(
+			( accumulator, slug ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
+				accumulator[ slug ] = {
+					hasEntities: entitiesHasRecords[ slug ],
+					existingEntitiesIds,
+				};
+				return accumulator;
+			},
+			{}
+		);
+	}, [ templatePrefixes, recordsToExcludePerEntity, entitiesHasRecords ] );
 	return entitiesInfo;
 };
diff --git a/packages/edit-site/src/components/page-templates-template-parts/add-new-template-part.js b/packages/edit-site/src/components/page-templates-template-parts/add-new-template-part.js
@@ -4,7 +4,7 @@
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useState, memo } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 
 /**
@@ -17,7 +17,7 @@ import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export default function AddNewTemplatePart() {
+function AddNewTemplatePart() {
 	const { canCreate, postType } = useSelect( ( select ) => {
 		const { supportsTemplatePartsMode } =
 			select( editSiteStore ).getSettings();
@@ -58,3 +58,5 @@ export default function AddNewTemplatePart() {
 		</>
 	);
 }
+
+export default memo( AddNewTemplatePart );
diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js
@@ -407,11 +407,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			}
 			actions={
 				postType === TEMPLATE_POST_TYPE ? (
-					<AddNewTemplate
-						templateType={ postType }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
+					<AddNewTemplate />
 				) : (
 					<AddNewTemplatePart />
 				)

diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
@@ -30,19 +30,7 @@ test.describe( 'Site editor url navigation', () => {
 				status: 'publish',
 			} );
 			await admin.visitSiteEditor();
-			// We need to wait the response from the `posts` request in order to click the augmented menu item,
-			// that includes the options for creating templates for specific posts.
-			await Promise.all( [
-				page.waitForResponse(
-					( resp ) =>
-						resp
-							.url()
-							.includes(
-								'/index.php?rest_route=%2Fwp%2Fv2%2Fposts&context=view'
-							) && resp.status() === 200
-				),
-				page.click( 'role=button[name="Templates"]' ),
-			] );
+			await page.click( 'role=button[name="Templates"]' );
 			await page.click( 'role=button[name="Add New Template"i]' );
 			await page
 				.getByRole( 'button', {