diff --git a/src/OnboardingSPA/components/Animate/index.js b/src/OnboardingSPA/components/Animate/index.js
new file mode 100644
index 000000000..fb9b58d18
--- /dev/null
+++ b/src/OnboardingSPA/components/Animate/index.js
@@ -0,0 +1,37 @@
+/**
+ * A Animator to show animation
+ *
+ * @param {string}             type  The name of Animation to be shown.
+ * @param { object | boolean } after The variable to look after for before showing the animation, by default true to show the children right away.
+ *
+ */
+const Animate = ( { type, after = true, children } ) => {
+	const prefix = 'animate';
+
+	/**
+	 * Returns the appropriate className
+	 *
+	 * @return {string | void} ClassName that applies the animations
+	 */
+	function getAnimateClassName() {
+		if ( type ) {
+			let classname = '';
+
+			switch ( type ) {
+				// Add animation types and appropriate CSS
+				case 'fade-in':
+					classname = prefix.concat( '__fade-in' );
+					break;
+			}
+			return classname;
+		}
+	}
+
+	return ! after ? (
+		<div className={ `${ prefix }__blank` }>{ children }</div>
+	) : (
+		<div className={ getAnimateClassName() }>{ children }</div>
+	);
+};
+
+export default Animate;
diff --git a/src/OnboardingSPA/components/Animate/stylesheet.scss b/src/OnboardingSPA/components/Animate/stylesheet.scss
new file mode 100644
index 000000000..04c4e89ba
--- /dev/null
+++ b/src/OnboardingSPA/components/Animate/stylesheet.scss
@@ -0,0 +1,11 @@
+.animate {
+    
+    &__blank {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__fade-in {
+        animation: fadeInWithDisabledClicks 500ms ease-in;
+    }
+}
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 3c376b28b..deb7bebc5 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -13,6 +13,7 @@ import content from '../content.json';
 import countries from '../countries.json';
 import currencies from '../currencies.json';
 import { useWPSettings } from '../useWPSettings';
+import Animate from '../../../../components/Animate';
 import { EcommerceStateHandler } from '../../../../components/StateHandlers';
 
 const StepAddress = () => {
@@ -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'>
+						<Animate type="fade-in" after={ 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>
+						</Animate>
 						<button
 							className='nfd-nav-card-button nfd-card-button'
 							disabled={settings === null}
diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss
index 2a88fb833..b916ae7d5 100644
--- a/src/OnboardingSPA/styles/_utilities.scss
+++ b/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;
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 5c8161be8..49c025c99 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -39,6 +39,7 @@
 @import "../components/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";
+@import "../components/Animate/stylesheet";
 
 // CSS for Pages
 @import "../pages/Steps/BasicInfo/stylesheet";