From 9537e31ea567c9f18078280f3376e5e55b7d8c5c Mon Sep 17 00:00:00 2001
From: GabrielBarros <gabriel.barros@vtex.com.br>
Date: Wed, 10 Aug 2022 15:55:56 -0300
Subject: [PATCH 1/3] Profile Validator Loading added

---
 react/AffiliateProfileValidator.tsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/react/AffiliateProfileValidator.tsx b/react/AffiliateProfileValidator.tsx
index 6f4c2d0..03dc2f0 100644
--- a/react/AffiliateProfileValidator.tsx
+++ b/react/AffiliateProfileValidator.tsx
@@ -1,5 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import type { FC } from 'react'
+import { useOrderForm } from 'vtex.order-manager/OrderForm'
+import { Spinner } from 'vtex.styleguide'
 
 import useAffiliate from './context/useAffiliate'
 import { getSlugStoreFront } from './utils/shared'
@@ -10,17 +12,32 @@ type Props = {
 }
 
 const AffiliateProfileValidator: FC<Props> = ({ Valid, Invalid }) => {
-  const [valid, setValid] = useState(false)
   const affiliate = useAffiliate()
   const slug = useMemo(() => {
     return getSlugStoreFront()
   }, [])
 
-  useEffect(() => {
-    setValid(affiliate?.affiliate?.slug === slug)
-  }, [affiliate, slug])
+  const { orderForm } = useOrderForm()
 
-  return <div>{valid ? <Valid /> : <Invalid />}</div>
+  const loading =
+    orderForm?.clientProfileData === undefined ||
+    affiliate.affiliateOrdersLoading
+
+  const isValid = affiliate?.affiliate?.slug === slug
+
+  if (loading) {
+    return (
+      <div className="justify-center-s flex-s pa9-s">
+        <Spinner />
+      </div>
+    )
+  }
+
+  if (isValid) {
+    return <Valid />
+  }
+
+  return <Invalid />
 }
 
 export default AffiliateProfileValidator

From eb7d4f5db6344bdcdcbe5d0a9bc49adb9591c2f7 Mon Sep 17 00:00:00 2001
From: GabrielBarros <gabriel.barros@vtex.com.br>
Date: Wed, 10 Aug 2022 16:04:32 -0300
Subject: [PATCH 2/3] CHANGELOG and merge adjustments

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb3a058..4bebb45 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- `Spinner` added to the loading state in the profile page
+
 ## [0.57.1] - 2022-08-09
 
 ### Fixed

From f6fc648b285a6151885d970578bfaf68418c234c Mon Sep 17 00:00:00 2001
From: GabrielBarros <gabriel.barros@vtex.com.br>
Date: Thu, 18 Aug 2022 16:32:59 -0300
Subject: [PATCH 3/3] UseMemo and React.FC Type fix

---
 react/AffiliateProfileValidator.tsx | 17 +++++++++++------
 react/AffiliateValidator.tsx        |  4 ++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/react/AffiliateProfileValidator.tsx b/react/AffiliateProfileValidator.tsx
index 03dc2f0..3cb7bea 100644
--- a/react/AffiliateProfileValidator.tsx
+++ b/react/AffiliateProfileValidator.tsx
@@ -7,8 +7,8 @@ import useAffiliate from './context/useAffiliate'
 import { getSlugStoreFront } from './utils/shared'
 
 type Props = {
-  Invalid: React.ComponentType
-  Valid: React.ComponentType
+  Invalid: React.FC
+  Valid: React.FC
 }
 
 const AffiliateProfileValidator: FC<Props> = ({ Valid, Invalid }) => {
@@ -19,11 +19,16 @@ const AffiliateProfileValidator: FC<Props> = ({ Valid, Invalid }) => {
 
   const { orderForm } = useOrderForm()
 
-  const loading =
-    orderForm?.clientProfileData === undefined ||
-    affiliate.affiliateOrdersLoading
+  const loading = useMemo(() => {
+    return (
+      orderForm?.clientProfileData === undefined ||
+      affiliate.affiliateOrdersLoading
+    )
+  }, [orderForm, affiliate])
 
-  const isValid = affiliate?.affiliate?.slug === slug
+  const isValid = useMemo(() => {
+    return affiliate?.affiliate?.slug === slug
+  }, [affiliate, slug])
 
   if (loading) {
     return (
diff --git a/react/AffiliateValidator.tsx b/react/AffiliateValidator.tsx
index 6bb73b1..9e8ac12 100644
--- a/react/AffiliateValidator.tsx
+++ b/react/AffiliateValidator.tsx
@@ -14,8 +14,8 @@ export type IsAffiliateValidQueryResult = {
 }
 
 type Props = {
-  Invalid: React.ComponentType
-  Valid: React.ComponentType
+  Invalid: React.FC
+  Valid: React.FC
 }
 
 const AffiliateValidator: FC<Props> = ({ Invalid, Valid }) => {