From 70e2015e1fb93d5b62e08774f0dcf85718b1cd1f Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 9 Dec 2024 18:48:56 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20multiple=20spinners=20in?=
 =?UTF-8?q?=20nested=20Busy-wrappers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_spinner-overlay.scss |  1 +
 .../ReusableComponents/BusyStateWrapper.js    | 37 ++++++++++++-------
 .../Onboarding/Components/Navigation.js       |  6 ++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss
index 2f32b118f..8f5e136e9 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss
@@ -12,5 +12,6 @@
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		margin: 0;
 	}
 }
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BusyStateWrapper.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BusyStateWrapper.js
index 79799bce2..959b71bfe 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BusyStateWrapper.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BusyStateWrapper.js
@@ -3,34 +3,43 @@ import {
 	isValidElement,
 	cloneElement,
 	useMemo,
+	createContext,
+	useContext,
 } from '@wordpress/element';
 import classNames from 'classnames';
 
 import { CommonHooks } from '../../data';
 import SpinnerOverlay from './SpinnerOverlay';
 
+// Create context to track the busy state across nested wrappers
+const BusyContext = createContext( false );
+
 /**
  * Wraps interactive child elements and modifies their behavior based on the global `isBusy` state.
  * Allows custom processing of child props via the `onBusy` callback.
  *
- * @param {Object}   props           - Component properties.
- * @param {Children} props.children  - Child components to wrap.
- * @param {boolean}  props.enabled   - Enables or disables the busy-state logic.
- * @param {string}   props.className - Additional class names for the wrapper.
- * @param {Function} props.onBusy    - Callback to process child props when busy.
+ * @param {Object}   props             - Component properties.
+ * @param {Children} props.children    - Child components to wrap.
+ * @param {boolean}  props.enabled     - Enables or disables the busy-state logic.
+ * @param {boolean}  props.busySpinner - Allows disabling the spinner in busy-state.
+ * @param {string}   props.className   - Additional class names for the wrapper.
+ * @param {Function} props.onBusy      - Callback to process child props when busy.
  */
 const BusyStateWrapper = ( {
 	children,
 	enabled = true,
+	busySpinner = true,
 	className = '',
 	onBusy = () => ( { disabled: true } ),
 } ) => {
 	const { isBusy } = CommonHooks.useBusyState();
+	const hasBusyParent = useContext( BusyContext );
 
-	const markAsBusy = isBusy && enabled;
+	const isBusyComponent = isBusy && enabled;
+	const showSpinner = busySpinner && isBusyComponent && ! hasBusyParent;
 
 	const wrapperClassName = classNames( 'ppcp-r-busy-wrapper', className, {
-		'ppcp--is-loading': markAsBusy,
+		'ppcp--is-loading': isBusyComponent,
 	} );
 
 	const memoizedChildren = useMemo(
@@ -39,18 +48,20 @@ const BusyStateWrapper = ( {
 				isValidElement( child )
 					? cloneElement(
 							child,
-							markAsBusy ? onBusy( child.props ) : {}
+							isBusyComponent ? onBusy( child.props ) : {}
 					  )
 					: child
 			),
-		[ children, markAsBusy, onBusy ]
+		[ children, isBusyComponent, onBusy ]
 	);
 
 	return (
-		<div className={ wrapperClassName }>
-			{ markAsBusy && <SpinnerOverlay /> }
-			{ memoizedChildren }
-		</div>
+		<BusyContext.Provider value={ isBusyComponent }>
+			<div className={ wrapperClassName }>
+				{ showSpinner && <SpinnerOverlay /> }
+				{ memoizedChildren }
+			</div>
+		</BusyContext.Provider>
 	);
 };
 
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js
index a30cb4ce2..3c12e1206 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js
@@ -23,6 +23,7 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
 			<div className="ppcp-r-navigation">
 				<BusyStateWrapper
 					className="ppcp-r-navigation--left"
+					busySpinner={ false }
 					enabled={ ! isFirst }
 				>
 					<Button
@@ -46,7 +47,10 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
 
 const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => {
 	return (
-		<BusyStateWrapper className="ppcp-r-navigation--right">
+		<BusyStateWrapper
+			className="ppcp-r-navigation--right"
+			busySpinner={ false }
+		>
 			<Button variant="link" onClick={ onExit }>
 				{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
 			</Button>