Zoom out: add patterns loading state (#61513)

* Zoom out: add patterns loading state * Fix flash of no results * Centre loading spinner --------- Co-authored-by: Sarah Norris <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: mikachan <[email protected]> Co-authored-by: scruffian <[email protected]>
WordPress · May 10, 2024 · c240ac2 · c240ac2
1 parent b793539
commit c240ac2
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -3,8 +3,9 @@
  */
 import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
+import { Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
+import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -28,6 +31,19 @@ function BlockPatternsTab( {
 	const categories = usePatternCategories( rootClientId );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
+	const isResolvingPatterns = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).isResolvingPatterns(),
+		[]
+	);
+
+	if ( isResolvingPatterns ) {
+		return (
+			<div className="block-editor-inserter__patterns-loading">
+				<Spinner />
+			</div>
+		);
+	}
 
 	if ( ! categories.length ) {
 		return <InserterNoResults />;

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -187,7 +187,8 @@ $block-inserter-tabs-height: 44px;
 	width: 100%;
 }
 
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
 	padding: $grid-unit-40;
 	text-align: center;
 }

diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -401,6 +401,21 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 	}, getAllPatternsDependants( select ) )
 );
 
+export const isResolvingPatterns = createRegistrySelector( ( select ) =>
+	createSelector( ( state ) => {
+		const blockPatternsSelect = state.settings[ selectBlockPatternsKey ];
+		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
+		return (
+			( blockPatternsSelect
+				? blockPatternsSelect( select ) === undefined
+				: false ) ||
+			( reusableBlocksSelect
+				? reusableBlocksSelect( select ) === undefined
+				: false )
+		);
+	}, getAllPatternsDependants( select ) )
+);
+
 const EMPTY_ARRAY = [];
 
 export const getReusableBlocks = createRegistrySelector(

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -267,10 +267,14 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
-			[ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) =>
-				unlock( select( coreStore ) ).getBlockPatternsForPostType(
-					postType
-				),
+			[ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) => {
+				const { hasFinishedResolution, getBlockPatternsForPostType } =
+					unlock( select( coreStore ) );
+				const patterns = getBlockPatternsForPostType( postType );
+				return hasFinishedResolution( 'getBlockPatterns' )
+					? patterns
+					: undefined;
+			},
 			[ unlock( privateApis ).reusableBlocksSelectKey ]:
 				__experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,