From 1a464992bc18108bd7f2248a15dbf401f5e27ead Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Mon, 23 Dec 2024 12:08:08 +0530
Subject: [PATCH] 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.
---
 .../inserter/block-patterns-explorer/index.js   |  3 ++-
 .../inserter/block-patterns-tab/index.js        | 12 ++++++++++--
 .../pattern-category-previews.js                |  2 +-
 .../use-pattern-categories.js                   | 17 ++++++++++++++---
 .../src/components/inserter/style.scss          |  7 +++++++
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
index 2bc41a7176954c..a4d5d4358e7ebc 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
+++ b/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">
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
index f250ed6f12ebad..6150a96d6ad348 100644
--- 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,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 />;
 	}
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
index f9af2b6f8c42d2..3fa0f25161eba0 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
+++ b/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
 	);
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js
index 2adc6b48579dd7..1e002382f3728c 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js
+++ b/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 };
 }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index c6522671f938d7..ad534c62d712a0 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/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;
+}