From 81a2c3de7e455e26a86ca3396613149f53f5eae1 Mon Sep 17 00:00:00 2001
From: abhijitb <abhijit.bhatnagar@gmail.com>
Date: Tue, 17 Jan 2023 16:27:38 +0530
Subject: [PATCH] using Animate component checking for more variables for
 animation

---
 .../Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js     | 6 +++---
 .../Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
index c978f2857..cdded4892 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
@@ -13,7 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../../components/NeedHelpTag';
 import content from '../content.json';
 import { translations } from '../../../../../utils/locales/translations';
-import StepStateHandler from '../../../../../components/StateHandlers/StepStateHandler';
+import Animate from '../../../../../components/Animate';
 
 const StepPrimarySetup = () => {
 	const {
@@ -95,7 +95,7 @@ const StepPrimarySetup = () => {
 						) }
 					/>
 				</div>
-				<StepStateHandler watch={ content.categories }>
+				<Animate type="fade-in" after={ content.categories && selectedPrimaryCategoryInStore }>
 					<div className="nfd-setup-primary-categories">
 						{ content.categories.map( ( item, idx ) => {
 							return (
@@ -148,7 +148,7 @@ const StepPrimarySetup = () => {
 							/>
 						</div>
 					</div>
-				</StepStateHandler>
+				</Animate>
 				<NavCardButton
 					text={ __( content.buttonText ) }
 					disabled={ content.categories === null}
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
index 040cebec2..9896c0edd 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
@@ -13,7 +13,7 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../../components/NeedHelpTag';
 import content from '../content.json';
 import { translations } from '../../../../../utils/locales/translations';
-import StepStateHandler from '../../../../../components/StateHandlers/StepStateHandler';
+import Animate from '../../../../../components/Animate';
 
 const StepPrimarySetup = () => {
 	const {
@@ -102,7 +102,7 @@ const StepPrimarySetup = () => {
 						) }
 					/>
 				</div>
-				<StepStateHandler watch={ categoriesArray[ 0 ]?.subCategories }>
+				<Animate type="fade-in" after={ categoriesArray[ 0 ]?.subCategories && selectedCategoryInStore }>
 					<div className="nfd-setup-secondary-categories">
 						<div className="nfd-card-category-wrapper">
 							<div className="category-scrolling-wrapper">
@@ -166,7 +166,7 @@ const StepPrimarySetup = () => {
 							/>
 						</div>
 					</div>
-				</StepStateHandler>
+				</Animate>
 				<NavCardButton
 					text={ __( content.buttonText ) }
 					disabled={ categoriesArray[ 0 ]?.subCategories === null }