From 36de426260b703b9c005ca9e64971109c90fedab Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 9 Dec 2024 19:24:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20a=20real=20loading=20scree?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/css/components/_app.scss        | 22 +++++++++++++
 .../ppcp-settings/resources/css/style.scss    |  1 +
 .../ReusableComponents/SpinnerOverlay.js      |  7 +++-
 .../js/Components/Screens/Settings.js         | 33 ++++++++++++++-----
 4 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/css/components/_app.scss

diff --git a/modules/ppcp-settings/resources/css/components/_app.scss b/modules/ppcp-settings/resources/css/components/_app.scss
new file mode 100644
index 000000000..7e69cbada
--- /dev/null
+++ b/modules/ppcp-settings/resources/css/components/_app.scss
@@ -0,0 +1,22 @@
+/**
+ * Global app-level styles
+ */
+
+.ppcp-r-app.loading {
+	height: 400px;
+	width: 400px;
+	position: absolute;
+	left: 50%;
+	transform: translate(-50%, 0);
+	text-align: center;
+
+	.ppcp-r-spinner-overlay {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.ppcp-r-spinner-overlay__message {
+		transform: translate(0, 32px)
+	}
+}
diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss
index 70e9b8971..56fe55a62 100644
--- a/modules/ppcp-settings/resources/css/style.scss
+++ b/modules/ppcp-settings/resources/css/style.scss
@@ -23,6 +23,7 @@
 	@import './components/screens/onboarding';
 	@import './components/screens/settings';
 	@import './components/screens/overview/tab-styling';
+	@import './components/app';
 }
 
 @import './components/reusable-components/payment-method-modal';
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js
index dec732a3e..b4165b5ba 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js
@@ -1,8 +1,13 @@
 import { Spinner } from '@wordpress/components';
 
-const SpinnerOverlay = () => {
+const SpinnerOverlay = ( { message = '' } ) => {
 	return (
 		<div className="ppcp-r-spinner-overlay">
+			{ message && (
+				<span className="ppcp-r-spinner-overlay__message">
+					{ message }
+				</span>
+			) }
 			<Spinner />
 		</div>
 	);
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
index e0634343c..009d1d46b 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings.js
@@ -1,20 +1,37 @@
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+
 import { OnboardingHooks } from '../../data';
+import SpinnerOverlay from '../ReusableComponents/SpinnerOverlay';
+
 import Onboarding from './Onboarding/Onboarding';
 import SettingsScreen from './SettingsScreen';
 
 const Settings = () => {
 	const onboardingProgress = OnboardingHooks.useSteps();
 
-	if ( ! onboardingProgress.isReady ) {
-		// TODO: Use better loading state indicator.
-		return <div>Loading...</div>;
-	}
+	const wrapperClass = classNames( 'ppcp-r-app', {
+		loading: ! onboardingProgress.isReady,
+	} );
 
-	if ( ! onboardingProgress.completed ) {
-		return <Onboarding />;
-	}
+	const Content = useMemo( () => {
+		if ( ! onboardingProgress.isReady ) {
+			return (
+				<SpinnerOverlay
+					message={ __( 'Loading…', 'woocommerce-paypal-payments' ) }
+				/>
+			);
+		}
 
-	return <SettingsScreen />;
+		if ( ! onboardingProgress.completed ) {
+			return <Onboarding />;
+		}
+
+		return <SettingsScreen />;
+	}, [ onboardingProgress ] );
+
+	return <div className={ wrapperClass }>{ Content }</div>;
 };
 
 export default Settings;