Added State Handler

Ran Lint

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/Sidebar/LearnMore/contents.js

@@ -3,15 +3,17 @@ import { __, sprintf } from '@wordpress/i18n';
 import { translations } from '../../../../../../utils/locales/translations';
 import { institution } from '@wordpress/icons';
 
-const getContents = ( brandName,  techSupportLink, fullServiceCreativeTeamLink ) => {
+const getContents = (
+	brandName,
+	techSupportLink,
+	fullServiceCreativeTeamLink
+) => {
 	return {
 		introduction: {
 			heading: __( 'Tax Info', 'wp-module-onboarding' ),
 			subheading: sprintf(
 				/* translators: 1: Site 2: Brand 3: Site */
-				__(
-					'A %s that does taxes in one click. That’s pretty novel.'
-				),
+				__( 'A %s that does taxes in one click. That’s pretty novel.' ),
 				translations( 'site' ),
 				brandName,
 				translations( 'Site' )

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

@@ -34,15 +34,24 @@ const StepIntroPanel = lazy( () =>
 );
 
 const LearnMore = () => {
-	const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => {
-		return {
-			brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
-			techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(),
-			fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(),
-		};
-	} );
+	const { brandName, techSupportLink, fullServiceCreativeTeamLink } =
+		useSelect( ( select ) => {
+			return {
+				brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+				techSupportLink:
+					select( nfdOnboardingStore ).getTechSupportUrl(),
+				fullServiceCreativeTeamLink:
+					select(
+						nfdOnboardingStore
+					).getfullServiceCreativeTeamUrl(),
+			};
+		} );
 
-	const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink );
+	const content = getContents(
+		brandName,
+		techSupportLink,
+		fullServiceCreativeTeamLink
+	);
 
 	return (
 		<div className="nfd-onboarding-sidebar-learn-more__ecommerce-tax-info">
@@ -61,7 +70,7 @@ const LearnMore = () => {
 				<ButtonWhite
 					text={ content.help.fullService.text }
 					onClick={ () =>
-						( window.open( content.help.fullService.link, '_blank') )
+						window.open( content.help.fullService.link, '_blank' )
 					}
 				/>
 				<SupportLink