PRESS 2-462 Loader for Street Address step Ecommerce

src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * A State Handler to manage Steps
+ *
+ * @param {string} children          The children to be rendered out.
+ * @param {number} watch             The variable to be awaited for to be fetched.
+ *
+ */
+const StepStateHandler = ({ watch, children }) => {
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch]);
+
+    return !watch ? (
+        <div className='step-state-handler--blank'>
+            { children }
+        </div>
+    ) : (
+        <>
+            {<div style={{ display: 'none' }}>{rerender}</div>}
+                <div className='step-state-handler--visible'>
+                {children}
+            </div>
+        </>
+    );
+};
+
+export default StepStateHandler;

src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss

@@ -0,0 +1,12 @@
+.step-state-handler {
+
+    &--blank {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &--visible {
+       animation: fadeInWithDisabledClicks 500ms ease-in;
+    }
+
+}

src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js

@@ -14,6 +14,7 @@ import countries from '../countries.json';
 import currencies from '../currencies.json';
 import { useWPSettings } from '../useWPSettings';
 import { EcommerceStateHandler } from '../../../../components/StateHandlers';
+import StepStateHandler from '../../../../components/StateHandlers/StepStateHandler';
 
 const StepAddress = () => {
 	const isLargeViewport = useViewportMatch('medium');
@@ -148,131 +149,132 @@ const StepAddress = () => {
 									'wp-module-onboarding'
 								)}
 							/>
-							{settings === null && <p>Loading your details...</p>}
 						</div>
-						<div className='store-address-form'>
-							<div data-name='country'>
-								<label aria-required>
-									{__('Where is your store based?', 'wp-module-onboarding')}
-								</label>
-								{settings === null ? (
-									<input type='text' disabled />
-								) : (
-									<select
-										type='text'
-										name='country'
-										required
-										defaultValue={selectedCountry}
-										{...fieldProps}
-									>
-										{countries.map((country) => (
-											<option key={country.code} value={country.code}>
-												{country.name}
-											</option>
-										))}
-									</select>
-								)}
-							</div>
-							<div data-name='woocommerce_store_address'>
-								<label aria-required>
-									{__('Address', 'wp-module-onboarding')}
-								</label>
-								<input
-									name='woocommerce_store_address'
-									type='text'
-									required
-									defaultValue={address?.woocommerce_store_address}
-									{...fieldProps}
-								/>
-							</div>
-							<div
-								data-name='full-address'
-								data-state-empty={states.length === 0}
-							>
-								<div data-name='woocommerce_store_city'>
+						<StepStateHandler watch={ settings }>
+							<div className={'store-address-form'}>
+								<div data-name='country'>
 									<label aria-required>
-										{__('City', 'wp-module-onboarding')}
+										{__('Where is your store based?', 'wp-module-onboarding')}
+									</label>
+									{settings === null ? (
+										<input type='text' disabled />
+									) : (
+										<select
+											type='text'
+											name='country'
+											required
+											defaultValue={selectedCountry}
+											{...fieldProps}
+										>
+											{countries.map((country) => (
+												<option key={country.code} value={country.code}>
+													{country.name}
+												</option>
+											))}
+										</select>
+									)}
+								</div>
+								<div data-name='woocommerce_store_address'>
+									<label aria-required>
+										{__('Address', 'wp-module-onboarding')}
 									</label>
 									<input
-										name='woocommerce_store_city'
+										name='woocommerce_store_address'
 										type='text'
 										required
-										defaultValue={address?.woocommerce_store_city}
+										defaultValue={address?.woocommerce_store_address}
 										{...fieldProps}
 									/>
 								</div>
-								{states.length === 0 || settings === null ? null : (
-									<div data-name='state'>
+								<div
+									data-name='full-address'
+									data-state-empty={states.length === 0}
+								>
+									<div data-name='woocommerce_store_city'>
 										<label aria-required>
-											{__('State', 'wp-module-onboarding')}
+											{__('City', 'wp-module-onboarding')}
 										</label>
-										<select
+										<input
+											name='woocommerce_store_city'
 											type='text'
-											name='state'
 											required
-											defaultValue={
-												selectedCountry == defaultCountry ? defaultState : ''
-											}
+											defaultValue={address?.woocommerce_store_city}
 											{...fieldProps}
-										>
-											<option key={''} value={''} selected />
-											{states.map((state) => (
-												<option key={state.code} value={state.code}>
-													{state.name}
-												</option>
-											))}
-										</select>
+										/>
 									</div>
-								)}
-								<div data-name='woocommerce_store_postcode'>
+									{states.length === 0 || settings === null ? null : (
+										<div data-name='state'>
+											<label aria-required>
+												{__('State', 'wp-module-onboarding')}
+											</label>
+											<select
+												type='text'
+												name='state'
+												required
+												defaultValue={
+													selectedCountry == defaultCountry ? defaultState : ''
+												}
+												{...fieldProps}
+											>
+												<option key={''} value={''} selected />
+												{states.map((state) => (
+													<option key={state.code} value={state.code}>
+														{state.name}
+													</option>
+												))}
+											</select>
+										</div>
+									)}
+									<div data-name='woocommerce_store_postcode'>
+										<label aria-required>
+											{__('Postal Code', 'wp-module-onboarding')}
+										</label>
+										<input
+											name='woocommerce_store_postcode'
+											type='text'
+											required
+											defaultValue={address?.woocommerce_store_postcode}
+											{...fieldProps}
+										/>
+									</div>
+								</div>
+								<div>
 									<label aria-required>
-										{__('Postal Code', 'wp-module-onboarding')}
+										{__('Email', 'wp-module-onboarding')}
 									</label>
 									<input
-										name='woocommerce_store_postcode'
-										type='text'
+										name='woocommerce_email_from_address'
+										type='email'
 										required
-										defaultValue={address?.woocommerce_store_postcode}
+										defaultValue={address?.woocommerce_email_from_address}
 										{...fieldProps}
 									/>
 								</div>
+								<div>
+									<label>
+										{__(
+											'What currency do you want to display in your store?',
+											'wp-module-onboarding'
+										)}
+									</label>
+									<select
+										type='text'
+										name='woocommerce_currency'
+										value={address?.woocommerce_currency}
+										{...fieldProps}
+									>
+										{Object.entries(currencies).map(([code, currency]) => (
+											<option
+												key={code}
+												value={code}
+												dangerouslySetInnerHTML={{ __html: currency }}
+											/>
+										))}
+									</select>
+								</div>
+								<em style={{ display: 'inline' }}>* required</em>
 							</div>
-							<div>
-								<label aria-required>
-									{__('Email', 'wp-module-onboarding')}
-								</label>
-								<input
-									name='woocommerce_email_from_address'
-									type='email'
-									required
-									defaultValue={address?.woocommerce_email_from_address}
-									{...fieldProps}
-								/>
-							</div>
-							<div>
-								<label>
-									{__(
-										'What currency do you want to display in your store?',
-										'wp-module-onboarding'
-									)}
-								</label>
-								<select
-									type='text'
-									name='woocommerce_currency'
-									value={address?.woocommerce_currency}
-									{...fieldProps}
-								>
-									{Object.entries(currencies).map(([code, currency]) => (
-										<option
-											key={code}
-											value={code}
-											dangerouslySetInnerHTML={{ __html: currency }}
-										/>
-									))}
-								</select>
-							</div>
-							<em style={{ display: 'inline' }}>* required</em>
-						</div>
+						</StepStateHandler>
 						<button
 							className='nfd-nav-card-button nfd-card-button'
 							disabled={settings === null}

src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss

@@ -101,6 +101,7 @@
 				width: 100%;
 			}
 		}
+
 	}
 }
 

src/OnboardingSPA/styles/_utilities.scss

@@ -9,6 +9,18 @@
 	}
 }
 
+@keyframes fadeInWithDisabledClicks {
+
+	from {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
 @keyframes fadeInRight {
 	from {
 		opacity: 0;

src/OnboardingSPA/styles/app.scss

@@ -36,6 +36,7 @@
 @import "../components/ErrorState/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxItem/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxList/stylesheet";
+@import "../components/StateHandlers/StepStateHandler/stylesheet";
 @import "../components/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";