using Animate component checking for more variables for animation

newfold-labs · Jan 17, 2023 · 81a2c3d · 81a2c3d
1 parent 6d4bea7
commit 81a2c3d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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 }