Inserter: Add loading state and refactor pattern

- Added isLoading to usePatternCategories with spinner support in BlockPatternsTab.
- Refactored PatternsExplorer and PatternCategoryPreviews to destructure categories.
- Updated styles for loading spinner alignment.

packages/block-editor/src/components/inserter/block-patterns-explorer/index.js

@@ -17,7 +17,8 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ selectedCategory, setSelectedCategory ] =
 		useState( initialCategory );
 
-	const patternCategories = usePatternCategories( rootClientId );
+	const { categories: patternCategories } =
+		usePatternCategories( rootClientId );
 
 	return (
 		<div className="block-editor-block-patterns-explorer">

packages/block-editor/src/components/inserter/block-patterns-tab/index.js

@@ -3,7 +3,7 @@
  */
 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';
 
 /**
@@ -25,10 +25,18 @@ function BlockPatternsTab( {
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 
-	const categories = usePatternCategories( rootClientId );
+	const { categories, isLoading } = usePatternCategories( rootClientId );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 
+	if ( isLoading ) {
+		return (
+			<div className="block-editor-inserter__block-patterns-tabs-container-spinner">
+				<Spinner />
+			</div>
+		);
+	}
+
 	if ( ! categories.length ) {
 		return <InserterNoResults />;
 	}

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -51,7 +51,7 @@ export function PatternCategoryPreviews( {
 	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
-	const availableCategories = usePatternCategories(
+	const { categories: availableCategories } = usePatternCategories(
 		rootClientId,
 		patternSourceFilter
 	);

packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState, useEffect } from '@wordpress/element';
 import { _x, _n, sprintf } from '@wordpress/i18n';
 
 import { speak } from '@wordpress/a11y';
@@ -29,11 +29,18 @@ function hasRegisteredCategory( pattern, allCategories ) {
 }
 
 export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
+	const [ isLoading, setIsLoading ] = useState( true );
 	const [ patterns, allCategories ] = usePatternsState(
 		undefined,
 		rootClientId
 	);
 
+	useEffect( () => {
+		if ( patterns.length && allCategories.length ) {
+			setIsLoading( false );
+		}
+	}, [ patterns, allCategories ] );
+
 	const filteredPatterns = useMemo(
 		() =>
 			sourceFilter === 'all'
@@ -47,6 +54,10 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 
 	// Remove any empty categories.
 	const populatedCategories = useMemo( () => {
+		if ( isLoading ) {
+			return [];
+		}
+
 		const categories = allCategories
 			.filter( ( category ) =>
 				filteredPatterns.some( ( pattern ) =>
@@ -100,7 +111,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 			)
 		);
 		return categories;
-	}, [ allCategories, filteredPatterns ] );
+	}, [ allCategories, filteredPatterns, isLoading ] );
 
-	return populatedCategories;
+	return { categories: populatedCategories, isLoading };
 }

packages/block-editor/src/components/inserter/style.scss

@@ -648,3 +648,10 @@ $block-inserter-tabs-height: 44px;
 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
 	padding: 0 $grid-unit-30 $grid-unit-20;
 }
+
+.block-editor-inserter__block-patterns-tabs-container-spinner {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}