From a2c2b49468ff401c33cd454480c6f4995e614e6a Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 12 Jul 2021 17:42:36 +0400
Subject: [PATCH] Template Part: Avoid button layout shift

---
 .../src/template-part/edit/index.js           |  6 ++
 .../template-part/edit/placeholder/index.js   | 81 ++++++++++---------
 2 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index a6f6078bd0925..f8ce00e942984 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -49,6 +49,7 @@ export default function TemplatePartEdit( {
 		defaultWrapper,
 		area,
 		enableSelection,
+		hasResolvedReplacements,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -102,6 +103,10 @@ export default function TemplatePartEdit( {
 				defaultWrapper: defaultWrapperElement || 'div',
 				area: _area,
 				enableSelection: _enableSelection,
+				hasResolvedReplacements: hasFinishedResolution(
+					'getEntityRecords',
+					availableReplacementArgs
+				),
 			};
 		},
 		[ templatePartId, clientId ]
@@ -159,6 +164,7 @@ export default function TemplatePartEdit( {
 						clientId={ clientId }
 						setAttributes={ setAttributes }
 						enableSelection={ enableSelection }
+						hasResolvedReplacements={ hasResolvedReplacements }
 					/>
 				</TagName>
 			) }
diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js
index 807b29af8cb8b..2ea37ac11fdac 100644
--- a/packages/block-library/src/template-part/edit/placeholder/index.js
+++ b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -9,7 +9,7 @@ import { find } from 'lodash';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Placeholder, Dropdown, Button } from '@wordpress/components';
+import { Placeholder, Dropdown, Button, Spinner } from '@wordpress/components';
 import { serialize } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -29,6 +29,7 @@ export default function TemplatePartPlaceholder( {
 	clientId,
 	setAttributes,
 	enableSelection,
+	hasResolvedReplacements,
 } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial );
@@ -102,44 +103,52 @@ export default function TemplatePartPlaceholder( {
 							  )
 					}
 				>
-					<Dropdown
-						contentClassName="wp-block-template-part__placeholder-preview-dropdown-content"
-						position="bottom right left"
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<>
-								{ enableSelection && (
+					{ ! hasResolvedReplacements ? (
+						<Spinner />
+					) : (
+						<Dropdown
+							contentClassName="wp-block-template-part__placeholder-preview-dropdown-content"
+							position="bottom right left"
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<>
+									{ enableSelection && (
+										<Button
+											variant="primary"
+											onClick={ onToggle }
+											aria-expanded={ isOpen }
+										>
+											{ __( 'Choose existing' ) }
+										</Button>
+									) }
 									<Button
-										variant="primary"
-										onClick={ onToggle }
-										aria-expanded={ isOpen }
+										variant={
+											enableSelection
+												? 'tertiary'
+												: 'primary'
+										}
+										onClick={ () =>
+											setStep(
+												PLACEHOLDER_STEPS.patterns
+											)
+										}
 									>
-										{ __( 'Choose existing' ) }
+										{ sprintf(
+											// Translators: %s as template part area title ("Header", "Footer", etc.).
+											'New %s',
+											areaLabel.toLowerCase()
+										) }
 									</Button>
-								) }
-								<Button
-									variant={
-										enableSelection ? 'tertiary' : 'primary'
-									}
-									onClick={ () =>
-										setStep( PLACEHOLDER_STEPS.patterns )
-									}
-								>
-									{ sprintf(
-										// Translators: %s as template part area title ("Header", "Footer", etc.).
-										'New %s',
-										areaLabel.toLowerCase()
-									) }
-								</Button>
-							</>
-						) }
-						renderContent={ ( { onClose } ) => (
-							<TemplatePartSelection
-								setAttributes={ setAttributes }
-								onClose={ onClose }
-								area={ area }
-							/>
-						) }
-					/>
+								</>
+							) }
+							renderContent={ ( { onClose } ) => (
+								<TemplatePartSelection
+									setAttributes={ setAttributes }
+									onClose={ onClose }
+									area={ area }
+								/>
+							) }
+						/>
+					) }
 				</Placeholder>
 			) }
 			{ step === PLACEHOLDER_STEPS.patterns && (