Press 2 458 Loader for Radio label controls

src/OnboardingSPA/components/RadioControlWithSkeleton/index.js

@@ -0,0 +1,68 @@
+import { __ } from '@wordpress/i18n';
+import { RadioControl } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Renders Skeletons for Radio Control.
+ *
+ * @property {number} data                      The options to be renedered
+ * @property {number} watch                     The variable to be awaited for
+ * @property {string} callback                  The Render function in parent to be called
+ * @property {string} className                 The class name for the Live Preview
+ * 
+ */
+const RadioControlWithSkeleton = ({
+    data,
+    watch,
+    selected,
+    callback,
+    className,
+}) => {
+
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch, selected]);
+
+    const buildDummyPreviews = () => {
+        var customItems = [];
+
+        for (let idx = 0; idx < data.length; idx++)
+            customItems.push(<div className="radio-control-skeleton-item" />);
+
+        return (
+            <div className='radio-control-skeleton'>
+                {customItems}
+           </div>
+        );
+    };
+
+    const buildRealPreview = () => {
+        return (
+            <RadioControl
+                className={`${className} radio-control-main`}
+                selected={selected}
+                options={data.map((option) => {
+                    return {
+                        label: __(
+                            option.content,
+                            'wp-module-onboarding'
+                        ),
+                        value: __(
+                            option.value,
+                            'wp-module-onboarding'
+                        ),
+                    };
+                })}
+                onChange={(value) => callback(value)}
+            />
+        );
+    };
+
+    return !watch ? buildDummyPreviews() :
+        <>
+            {watch ? <div style={{ display: 'none' }}>{rerender}</div> : null}
+            {buildRealPreview()}
+        </>;
+};
+
+export default RadioControlWithSkeleton;

src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss

@@ -0,0 +1,22 @@
+/*COLOR VARIABLES*/
+$white-offset: rgb(224, 224, 224);
+$main-color-light: var(--nfd-onboarding-white);
+
+.radio-control {
+
+    &-main {
+        animation: fadeIn 300ms ease-in;
+    }
+
+    &-skeleton {
+        margin: 30px;
+
+        &-item {
+            height: 32px;
+            margin: 12px;
+            padding: 10px;
+            background: transparent;
+        }
+    }
+
+}

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

@@ -13,6 +13,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 import { useWPSettings } from '../useWPSettings';
+import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton';
 
 function createReverseLookup(state) {
 	return (option) =>
@@ -74,6 +75,22 @@ const StepTax = () => {
 		navigate('/ecommerce/step/products');
 	};
 
+	const selectOption = (value) => {
+		let selectedOption = content.stepTaxOptions.find(
+			(option) => option.value === value
+		);
+		setCurrentOnboardingData({
+			storeDetails: {
+				...currentData.storeDetails,
+				tax: {
+					...selectedOption.data,
+					option: selectedOption.value,
+					isStoreDetailsFilled: tax?.isStoreDetailsFilled
+				},
+			},
+		});
+	}
+
 	return (
         <EcommerceStateHandler>
 		<CommonLayout isBgPrimary isCentered>
@@ -85,33 +102,13 @@ const StepTax = () => {
 							subHeading={__(content.stepTaxSubHeading, 'wp-module-onboarding')}
 							question={__(content.question, 'wp-module-onboarding')}
 						/>
-						{settings === null && <p>Loading...</p>}
 					</div>
-					<RadioControl
-						className='nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step'
+					<RadioControlWithSkeleton
+						className={"nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step"}
+						watch={settings}
 						selected={tax?.option}
-						options={content.stepTaxOptions.map((option) => {
-							return {
-								label: __(option.content, 'wp-module-onboarding'),
-								value: option.value,
-							};
-						})}
-						onChange={(value) => {
-							let selectedOption = content.stepTaxOptions.find(
-								(option) => option.value === value
-							);
-							setCurrentOnboardingData({
-								storeDetails: {
-									...currentData.storeDetails,
-									tax: {
-										...selectedOption.data,
-										option: selectedOption.value,
-										isStoreDetailsFilled: tax?.isStoreDetailsFilled
-									},
-								},
-							});
-						}}
-					/>
+						data={content.stepTaxOptions}
+						callback={(value) => selectOption(value)} />
 					<button
 						className='nfd-nav-card-button nfd-card-button'
 						disabled={settings === null || tax?.option === undefined}

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

@@ -224,7 +224,7 @@ div.onboarding-product-step {
 
 .radio-control-tax-step {
 	label {
-		padding: 10px 190px 10px 15px;
+		padding: 10px 100px 10px 20px;
 	}
 
 	@media (max-width: #{ ($break-medium - 1) }) {

src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js

@@ -13,6 +13,7 @@ import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -80,23 +81,12 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioControl
-						className="nfd-onboarding-experience-step-tabs components-radio-control__input"
-						selected={ wpComfortLevel }
-						options={ content.options.map( ( option ) => {
-							return {
-								label: __(
-									option.content,
-									'wp-module-onboarding'
-								),
-								value: __(
-									option.value,
-									'wp-module-onboarding'
-								),
-							};
-						} ) }
-						onChange={ ( value ) => setWpComfortLevel( value ) }
-					/>
+					<RadioControlWithSkeleton 
+						className={"nfd-onboarding-experience-step-tabs components-radio-control__input"}
+						data={content.options}
+						watch={wpComfortLevel}
+						selected={wpComfortLevel}
+						callback={(value) => setWpComfortLevel(value)}/>
 					<NavCardButton
 						text={ __(
 							content.buttonText,

src/OnboardingSPA/styles/app.scss

@@ -34,6 +34,7 @@
 @import "../components/Button/NavCardButton/stylesheet";
 @import "../pages/Steps/Ecommerce/stylesheet";
 @import "../components/ErrorState/stylesheet";
+@import "../components/RadioControlWithSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxItem/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxList/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";