Merge pull request #91 from vtex/FIX-validator-loading

FIX / Profile Validator loading added

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

react/AffiliateProfileValidator.tsx

@@ -1,26 +1,48 @@
-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'
 
 type Props = {
-  Invalid: React.ComponentType
-  Valid: React.ComponentType
+  Invalid: React.FC
+  Valid: React.FC
 }
 
 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)
+  const { orderForm } = useOrderForm()
+
+  const loading = useMemo(() => {
+    return (
+      orderForm?.clientProfileData === undefined ||
+      affiliate.affiliateOrdersLoading
+    )
+  }, [orderForm, affiliate])
+
+  const isValid = useMemo(() => {
+    return affiliate?.affiliate?.slug === slug
   }, [affiliate, slug])
 
-  return <div>{valid ? <Valid /> : <Invalid />}</div>
+  if (loading) {
+    return (
+      <div className="justify-center-s flex-s pa9-s">
+        <Spinner />
+      </div>
+    )
+  }
+
+  if (isValid) {
+    return <Valid />
+  }
+
+  return <Invalid />
 }
 
 export default AffiliateProfileValidator

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 }) => {