💄 FIx the loading-spinner position and layout

modules/ppcp-settings/resources/css/_variables.scss

@@ -74,4 +74,11 @@ $card-vertical-gap: 48px;
 	// Default visual effects.
 	--box-shadow-active-item: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
 	--container-border-radius: 8px;
+
+	// Spinner/loader.
+	--spinner-size: 20px;
+	--spinner-overlay-width: 320px;
+	--spinner-overlay-height: 320px;
+	--spinner-overlay-color: #fafafa;
+	--spinner-overlay-box-shadow: var(--box-shadow-active-item);
 }

modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss

@@ -1,11 +1,13 @@
 .ppcp-r-spinner-overlay {
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 10;
+	width: var(--spinner-overlay-width);
+	height: var(--spinner-overlay-height);
+	box-shadow: var(--spinner-overlay-box-shadow);
 	background: var(--spinner-overlay-color);
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10;
 
 	.components-spinner {
 		position: absolute;
@@ -13,5 +15,15 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 		margin: 0;
+		width: var(--spinner-size);
+		height: var(--spinner-size);
+	}
+
+	.ppcp--spinner-message {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		text-align: center;
+		top: calc(50% + 20px + var(--spinner-size));
 	}
 }

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

@@ -9,9 +9,7 @@ const SpinnerOverlay = ( { message = null } ) => {
 	return (
 		<div className="ppcp-r-spinner-overlay">
 			{ message && (
-				<span className="ppcp-r-spinner-overlay__message">
-					{ message }
-				</span>
+				<span className="ppcp--spinner-message">{ message }</span>
 			) }
 			<Spinner />
 		</div>