From 76f8631b856537e4836b1832cb37f4ae630abc63 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 4 Jan 2023 18:59:18 +0530
Subject: [PATCH] Added Classes and CSS

---
 .../pages/Steps/Ecommerce/StepAddress/index.js            | 3 +--
 src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss   | 8 ++++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 3c376b28b..31cc890cb 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -148,9 +148,8 @@ const StepAddress = () => {
 									'wp-module-onboarding'
 								)}
 							/>
-							{settings === null && <p>Loading your details...</p>}
 						</div>
-						<div className='store-address-form'>
+							<div className={`store-address-form ${settings ? 'store-address-form--visible' : 'store-address-form--blank'}`}>
 							<div data-name='country'>
 								<label aria-required>
 									{__('Where is your store based?', 'wp-module-onboarding')}
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
index 4dd13e3ac..62ae53e8e 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
@@ -101,6 +101,14 @@
 				width: 100%;
 			}
 		}
+
+		&--visible {
+			animation: fadeIn 500ms ease-in;
+		}
+
+		&--blank {
+			opacity: 0;
+		}
 	}
 }