spt: render templates, one by one.

Automattic · Oct 3, 2019 · 653f7ff · 653f7ff
1 parent bbb8d5f
commit 653f7ff
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 39 deletions.
diff --git a/...plugin/starter-page-templates/page-template-modal/components/template-selector-control.js b/...plugin/starter-page-templates/page-template-modal/components/template-selector-control.js
@@ -15,14 +15,14 @@ import classnames from 'classnames';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { BaseControl } from '@wordpress/components';
 import { memo } from '@wordpress/element';
-/* eslint-enabled import/no-extraneous-dependencies */
+/* eslint-enable import/no-extraneous-dependencies */
 
 /**
  * Internal dependencies
  */
 import TemplateSelectorItem from './template-selector-item';
 import replacePlaceholders from '../utils/replace-placeholders';
-import { hasTemplates } from '../utils/templates-parser';
+import { hasTemplates, getTemplateSlugs } from '../utils/templates-parser';
 
 export const TemplateSelectorControl = ( {
 	label,
@@ -57,7 +57,7 @@ export const TemplateSelectorControl = ( {
 				className="template-selector-control__options"
 				data-testid="template-selector-control-options"
 			>
-				{ map( templates, ( { slug, title, preview, previewAlt } ) => (
+				{ map( getTemplateSlugs(), ( { slug, title, preview, previewAlt } ) => (
 					<li key={ `${ id }-${ slug }` } className="template-selector-control__template">
 						<TemplateSelectorItem
 							id={ id }

diff --git a/...ng-plugin/starter-page-templates/page-template-modal/components/template-selector-item.js b/...ng-plugin/starter-page-templates/page-template-modal/components/template-selector-item.js
@@ -31,14 +31,14 @@ const TemplateSelectorItem = props => {
 		handleTemplateConfirmation,
 	} = props;
 	const template = getTemplateBySlug( value );
-	const [ isParsing, setIsParsing ] = useState( template.isParsing );
+	const [ isParsing, setIsParsing ] = useState( true );
 
 	const onTemplatesParseListener = event => {
 		const parsedTemplate = get( event, [ 'detail', 'template' ] );
 		if ( value !== parsedTemplate.slug ) {
 			return;
 		}
-		setIsParsing( parsedTemplate.isParsing );
+		setIsParsing( false );
 	};
 	window.addEventListener( 'onTemplateParse', onTemplatesParseListener );
 

diff --git a/...-site-editing-plugin/starter-page-templates/page-template-modal/utils/templates-parser.js b/...-site-editing-plugin/starter-page-templates/page-template-modal/utils/templates-parser.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 /* eslint-disable import/no-extraneous-dependencies */
-import { get } from 'lodash';
+import { get, map } from 'lodash';
 /* eslint-enable import/no-extraneous-dependencies */
 
 /**
@@ -18,49 +18,68 @@ import { parse as parseBlocks } from '@wordpress/blocks';
 import replacePlaceholders from './replace-placeholders';
 
 const { templates = [], siteInformation = {} } = window.starterPageTemplatesConfig;
-const allTemplatesBlockBySlug = {};
-
-for ( const k in templates ) {
-	const template = templates[ k ];
-	const { content, title, slug } = template;
-
-	let parsedTemplate = {
-		blocks: [],
-		count: 0,
-		isEmpty: ! content,
-		isParsing: !! content,
-		title,
-		slug,
-	};
-
-	allTemplatesBlockBySlug[ slug ] = parsedTemplate;
-	setTimeout( () => {
-		if ( content ) {
-			const blocks = parseBlocks( replacePlaceholders( content, siteInformation ) );
-			parsedTemplate = { ...parsedTemplate, blocks, isParsing: false };
-			allTemplatesBlockBySlug[ slug ] = parsedTemplate;
-		}
+const allTemplatesBySlug = {};
+const allTemplates = map( templates, ( { slug, title, preview, previewAlt } ) => ( {
+	slug,
+	title,
+	preview,
+	previewAlt,
+} ) );
+
+/**
+ * Parse a template async.
+ * Collect the parsed templates into the global allTemplatesBySlug.
+ * Dispatch `onTemplateParse` global event.
+ *
+ * @param {string}	content	Template serialized content.
+ * @param {string}	title	Template title.
+ * @param {string}	slug	Template slug.
+ * @return {number} Timeout identifier.
+ */
+const parseTemplate = ( { content, title, slug } ) => {
+	return setTimeout( () => {
+		const blocks = content ? parseBlocks( replacePlaceholders( content, siteInformation ) ) : [];
+
+		const template = {
+			blocks,
+			count: blocks.length,
+			isEmpty: ! content,
+			title,
+			slug,
+		};
+
+		// Populate global templates container.
+		allTemplatesBySlug[ slug ] = template;
 
 		// Dispatch a global event to indicate a template has been parsed.
-		window.dispatchEvent(
-			new CustomEvent( 'onTemplateParse', {
-				detail: { template: parsedTemplate },
-			} )
-		);
+		window.dispatchEvent( new CustomEvent( 'onTemplateParse', { detail: { template } } ) );
 	}, 0 );
-}
+};
+
+// Listen when a template is parsed, and start to parse another one if exists.
+window.addEventListener( 'onTemplateParse', () => {
+	const nextTemplate = templates.shift();
+	if ( nextTemplate ) {
+		parseTemplate( nextTemplate );
+	}
+} );
+
+// Parse the first one template from the templates list.
+const firstTemplate = templates.shift();
+parseTemplate( firstTemplate );
 
 export const hasTemplates = () => !! templates.length;
 
-export const getBlocksByTemplateSlug = slug =>
-	get( allTemplatesBlockBySlug, [ slug, 'blocks' ], [] );
+export const getBlocksByTemplateSlug = slug => get( allTemplatesBySlug, [ slug, 'blocks' ], [] );
 
-export const getTitleByTemplateSlug = slug => get( allTemplatesBlockBySlug, [ slug, 'title' ], [] );
+export const getTitleByTemplateSlug = slug => get( allTemplatesBySlug, [ slug, 'title' ], [] );
 
-export const getTemplateBySlug = slug => get( allTemplatesBlockBySlug, [ slug ], {} );
+export const getTemplateBySlug = slug => get( allTemplatesBySlug, [ slug ], {} );
 
 export const getFirstTemplateSlug = () => get( templates, [ 0, 'slug' ], null );
 
 export const getTemplates = () => templates;
 
-export default allTemplatesBlockBySlug;
+export const getTemplateSlugs = () => allTemplates;
+
+export default allTemplatesBySlug;