fix: handle wizard loading on wizard tab

Automattic · Nov 26, 2024 · 136b27e · 136b27e
1 parent 10a45f4
commit 136b27e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/wizards/types/hooks.d.ts b/src/wizards/types/hooks.d.ts
@@ -55,6 +55,7 @@ type WizardData = {
 // Define the type for the selector's return value
 type WizardSelector = {
 	getWizardData: ( slug: string ) => WizardData;
+	isLoading: () => boolean;
 };
 
 /**

diff --git a/src/wizards/wizards-tab.tsx b/src/wizards/wizards-tab.tsx
@@ -1,3 +1,13 @@
+/**
+ * WordPress dependencies.
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies.
+ */
+import { WIZARD_STORE_NAMESPACE } from '../components/src/wizard/store';
+
 /**
  * Wizards Tab component.
  */
@@ -15,11 +25,16 @@ function WizardsTab( {
 	className?: string;
 	description?: React.ReactNode;
 } ) {
+	const isWizardLoading = useSelect(
+		( select: ( namespace: string ) => WizardSelector ) =>
+			select( WIZARD_STORE_NAMESPACE ).isLoading(),
+		[]
+	);
 	const className = props.className || '';
 	return (
 		<div
 			className={ `${
-				isFetching ? 'is-fetching ' : ''
+				isWizardLoading || isFetching ? 'is-fetching ' : ''
 			}${ className } newspack-wizard__sections` }
 		>
 			<h1>{ title }</h1>