💄 Fix multiple spinners in nested Busy-wrappers

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;
 	}
 }

modules/ppcp-settings/resources/js/Components/ReusableComponents/BusyStateWrapper.js

@@ -3,12 +3,17 @@ 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.
@@ -16,21 +21,25 @@ import SpinnerOverlay from './SpinnerOverlay';
  * @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 (
+		<BusyContext.Provider value={ isBusyComponent }>
 			<div className={ wrapperClassName }>
-			{ markAsBusy && <SpinnerOverlay /> }
+				{ showSpinner && <SpinnerOverlay /> }
 				{ memoizedChildren }
 			</div>
+		</BusyContext.Provider>
 	);
 };
 

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>