💄 Add a real loading screen

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)
+	}
+}

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

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

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;