✨ Improve the loading experience

Before this change, the settings screen was briefly visible, before the merchant details were loaded from the REST endpoint

modules/ppcp-settings/resources/js/Components/Screens/Settings.js

@@ -12,7 +12,10 @@ import SendOnlyMessage from './SendOnlyMessage';
 
 const Settings = () => {
 	const onboardingProgress = OnboardingHooks.useSteps();
-	const { merchant } = useMerchantInfo();
+	const {
+		isReady: merchantIsReady,
+		merchant: { isSendOnlyCountry },
+	} = useMerchantInfo();
 
 	// Disable the "Changes you made might not be saved" browser warning.
 	useEffect( () => {
@@ -33,7 +36,7 @@ const Settings = () => {
 	} );
 
 	const Content = useMemo( () => {
-		if ( ! onboardingProgress.isReady ) {
+		if ( ! onboardingProgress.isReady || ! merchantIsReady ) {
 			return (
 				<SpinnerOverlay
 					message={ __( 'Loading…', 'woocommerce-paypal-payments' ) }
@@ -41,7 +44,7 @@ const Settings = () => {
 			);
 		}
 
-		if ( merchant.isCurrentCountrySendOnly ) {
+		if ( isSendOnlyCountry ) {
 			return <SendOnlyMessage />;
 		}
 
@@ -50,7 +53,12 @@ const Settings = () => {
 		}
 
 		return <SettingsScreen />;
-	}, [ onboardingProgress ] );
+	}, [
+		isSendOnlyCountry,
+		merchantIsReady,
+		onboardingProgress.completed,
+		onboardingProgress.isReady,
+	] );
 
 	return <div className={ wrapperClass }>{ Content }</div>;
 };

modules/ppcp-settings/resources/js/data/common/hooks.js

@@ -144,7 +144,7 @@ export const useWebhooks = () => {
 	};
 };
 export const useMerchantInfo = () => {
-	const { merchant, features } = useHooks();
+	const { isReady, merchant, features } = useHooks();
 	const { refreshMerchantData } = useDispatch( STORE_NAME );
 
 	const verifyLoginStatus = useCallback( async () => {
@@ -159,6 +159,7 @@ export const useMerchantInfo = () => {
 	}, [ refreshMerchantData, merchant ] );
 
 	return {
+		isReady,
 		merchant, // Merchant details
 		features, // Eligible merchant features
 		verifyLoginStatus, // Callback