diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 694bb565547c2..db7e4437e34cb 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -348,21 +348,8 @@ function LinkControl( {
className="block-editor-link-control"
>
{ isResolvingLink && (
-
-
-
- { __( 'Creating Page' ) }
-
-
- { __( 'Your new Page is being created' ) }.
-
-
+
+ Loading...
) }
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 41f4824524600..8c725357ebb38 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -391,6 +391,8 @@ describe( 'Default search suggestions', () => {
describe( 'Creating Entities (eg: Posts, Pages)', () => {
const noResults = [];
beforeEach( () => {
+
+
// Force returning empty results for existing Pages. Doing this means that the only item
// shown should be "Create Page" suggestion because there will be no search suggestions
// and our input does not conform to a direct entry schema (eg: a URL).
@@ -399,7 +401,23 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
it.each( [
[ 'HelloWorld', 'without spaces' ],
[ 'Hello World', 'with spaces' ],
- ] )( 'should display option to create a link for a valid Entity title "%s" (%s)', async ( entityNameText ) => {
+ ] )( 'should allow creating a link for a valid Entity title "%s" (%s)', async ( entityNameText ) => {
+
+
+ let resolver;
+ let resolvedEntity;
+ let currentLinkLabel;
+
+ const createEntity = (type, title) => new Promise((resolve) => {
+ resolver = resolve;
+ resolvedEntity = {
+ type,
+ title,
+ id: 123,
+ url: '/?p=123',
+ };
+ });
+
const LinkControlConsumer = () => {
const [ link, setLink ] = useState( null );
@@ -409,12 +427,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
onChange={ ( suggestion ) => {
setLink( suggestion );
} }
- createEntity={ ( type, title ) => Promise.resolve( {
- type,
- title,
- id: 123,
- url: '/?p=123',
- } ) }
+ createEntity={ createEntity }
/> );
};
@@ -440,14 +453,30 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
expect( createButton ).not.toBeNull();
expect( createButton.innerHTML ).toEqual( expect.stringContaining( entityNameText ) );
- await act( async () => {
+ // No need to wait in this test because we control the Promise
+ // resolution manually via the `resolver` reference
+ act( () => {
Simulate.click( createButton );
} );
await eventLoopTick();
- const currentLinkLabel = container.querySelector( '[aria-label="Currently selected"]' );
+ // Check for loading indicator
+ const loadingIndicator = container.querySelector('.block-editor-link-control__loading');
+ currentLinkLabel = container.querySelector('[aria-label="Currently selected"]');
+
+ expect(currentLinkLabel).toBeNull();
+ expect(loadingIndicator.innerHTML).toEqual(expect.stringContaining('Loading'));
+
+ // Resolve the `createEntity` promise
+ await act( async () => {
+ resolver(resolvedEntity);
+ });
+
+ await eventLoopTick();
+ // Test the new entity was displayed.
+ currentLinkLabel = container.querySelector( '[aria-label="Currently selected"]' );
const currentLink = container.querySelector( `[aria-labelledby="${ currentLinkLabel.id }"]` );
const currentLinkHTML = currentLink.innerHTML;