Added State Handler Again

src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js

@@ -0,0 +1,20 @@
+/**
+ * Renders Skeletons for Radio Control.
+ *
+ * @param {number} data       The options to be renedered
+ *
+ */
+const RadioControlSkeleton = ({ data }) => {
+    const buildDummyRadioControls = () => {
+        const 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>;
+    };
+
+    return buildDummyRadioControls();
+};
+
+export default RadioControlSkeleton;

src/OnboardingSPA/components/RadioControl/RadioControlState/index.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from '@wordpress/element';
+import RadioControlSkeleton from '../RadioControlSkeleton';
+
+/**
+ * A State Handler to manage Radio Control
+ *
+ * @param {number} data           The options to be renedered.
+ * @param {string} children       The children to be rendered out.
+ * @param {number} watch          The variable to be awaited for to be fetched.
+ *
+ */
+const RadioControlState = ({ data, watch, children }) => {
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch]);
+
+    return !watch ? (
+        <RadioControlSkeleton data={data} />
+    ) : (
+        <>
+            {<div style={{ display: 'none' }}>{rerender}</div>}
+            {children}
+        </>
+    );
+};
+
+export default RadioControlState;

src/OnboardingSPA/components/RadioControl/index.js

@@ -0,0 +1,2 @@
+export { default as RadioCtrlSkeleton } from './RadioControlSkeleton';
+export { default as RadioCtrlStateHandler } from './RadioControlState';

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

@@ -13,7 +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';
+import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
 
 function createReverseLookup(state) {
 	return (option) =>
@@ -103,12 +103,32 @@ const StepTax = () => {
 							question={__(content.question, 'wp-module-onboarding')}
 						/>
 					</div>
-					<RadioControlWithSkeleton
-						className={"nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step"}
-						watch={settings}
-						selected={tax?.option}
-						data={content.stepTaxOptions}
-						callback={(value) => selectOption(value)} />
+					<RadioCtrlStateHandler
+						watch={ settings }
+						data={ content.stepTaxOptions }
+					>
+						<RadioControl
+							className={
+								'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step radio-control-main'
+							}
+							selected={ tax?.option }
+							options={ content.stepTaxOptions.map(
+								( option ) => {
+									return {
+										label: __(
+											option.content,
+											'wp-module-onboarding'
+										),
+										value: __(
+											option.value,
+											'wp-module-onboarding'
+										),
+									};
+								}
+							)}
+							onChange={( value ) => selectOption( value )}
+						/>
+					</RadioCtrlStateHandler>
 					<button
 						className='nfd-nav-card-button nfd-card-button'
 						disabled={settings === null || tax?.option === undefined}

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

@@ -13,7 +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';
+import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -81,12 +81,32 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioControlWithSkeleton 
-						className={"nfd-onboarding-experience-step-tabs components-radio-control__input"}
-						data={content.options}
-						watch={wpComfortLevel}
-						selected={wpComfortLevel}
-						callback={(value) => setWpComfortLevel(value)}/>
+					<RadioCtrlStateHandler
+						watch={ wpComfortLevel }
+						data={ content.options }
+					>
+						<RadioControl
+							className={
+								'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-main'
+							}
+							selected={ wpComfortLevel }
+							options={ content.options.map(
+								( option ) => {
+									return {
+										label: __(
+											option.content,
+											'wp-module-onboarding'
+										),
+										value: __(
+											option.value,
+											'wp-module-onboarding'
+										),
+									};
+								}
+							)}
+							onChange={( value ) => setWpComfortLevel( value )}
+						/>
+					</RadioCtrlStateHandler>
 					<NavCardButton
 						text={ __(
 							content.buttonText,

src/OnboardingSPA/styles/app.scss

@@ -34,9 +34,9 @@
 @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/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";