build : Fixed the page load issues in the get credential component (#…

…1574)
adobe · Apr 23, 2024 · a78b072 · a78b072
1 parent 647c63b
commit a78b072
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialForm.js b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialForm.js
@@ -18,7 +18,7 @@ const credentialNameRegex = /^(?=[A-Za-z0-9\s]{6,}$)[A-Za-z0-9\s]*$/;
 
 const CredentialForm = ({ formProps, credentialType, service }) => {
 
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [isError, setIsError] = useState(false);
   const [response, setResponse] = useState({});
   const [errResp, setErrorResp] = useState("");
@@ -84,6 +84,17 @@ const CredentialForm = ({ formProps, credentialType, service }) => {
 
   }
 
+  useEffect(() => {
+    if (window.adobeIMS?.isSignedInUser()) {
+      setTimeout(()=>{
+        setLoading(false)
+      },1000)
+    }
+    else {
+      setLoading(true)
+    }
+  }, [window.adobeIMS?.isSignedInUser()])
+
   useEffect(() => {
     setTimeout(() => {
       setOrganization(false);
@@ -111,10 +122,15 @@ const CredentialForm = ({ formProps, credentialType, service }) => {
     if (!organization) {
       setOrganizationValue(undefined);
       setShowCreateForm(false);
-      setIsError(true)
+      setLoading(true);
     }
     else if (organization && Object.keys(organization)?.length !== 0) {
       setShowCreateForm(true)
+      setIsError(true)
+      setTimeout(() => {
+        setLoading(false)
+        setIsError(false)
+      }, 2000)
     }
     else {
       if (Object.keys(organization)?.length === 0) {
@@ -378,7 +394,7 @@ const CredentialForm = ({ formProps, credentialType, service }) => {
           }
         </>
       }
-      {loading && !showCredential && <Loading credentials={credentialForm} downloadStatus={formData['Downloads']} />}
+      {loading && !showCredential && !isError && !showCreateForm && organization && <Loading credentials={credentialForm} isCreateCredential downloadStatus={formData['Downloads']} />}
       {modalOpen && (
         <ChangeOrganization
           setModalOpen={setModalOpen}
@@ -391,11 +407,11 @@ const CredentialForm = ({ formProps, credentialType, service }) => {
           setOrganizationValue={setOrganizationValue}
         />
       )}
-      {isError && !showCreateForm && !showCredential && <IllustratedMessage errorMessage={formProps?.[IllustratedMessage]} />}
+      {(!organization || isError) && loading && <Loading />}
+      {isError && !showCreateForm && !showCredential && !organization && <IllustratedMessage errorMessage={formProps?.[IllustratedMessage]} />}
       {showCredential && !showCreateForm && <MyCredential credentialProps={formProps} response={response} setShowCreateForm={setShowCreateForm} setShowCredential={setShowCredential} organizationName={organization?.name} formData={formData} orgID={organization?.id} />}
       {redirectToBeta && <JoinBetaProgram joinBeta={formProps?.[JoinBetaProgram]} />}
-      {!showCreateForm && !organization && !isError && <NoDeveloperAccessError developerAccessError={formProps?.[NoDeveloperAccessError]} title={credentialForm?.title} emailID={emailID} />}
-
+      {!showCreateForm && !organization && !isError && !loading && <NoDeveloperAccessError developerAccessError={formProps?.[NoDeveloperAccessError]} title={credentialForm?.title} emailID={emailID} />}
     </>
   )
 }

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Loading.js b/packages/gatsby-theme-aio/src/components/GetCredential/Loading.js
@@ -1,23 +1,25 @@
-import React, {useEffect, useRef} from 'react';
+import React, { useEffect, useRef } from 'react';
 import { css } from "@emotion/react";
 
 const Loading = ({
   credentials,
-  downloadStatus
+  downloadStatus,
+  isCreateCredential
 }) => {
   const divRef = useRef(null);
-  useEffect(() =>{
-    if(divRef.current){
+  useEffect(() => {
+    if (divRef.current) {
       divRef.current.scrollIntoView({
         behavior: 'smooth',
         block: 'center',
         inline: 'center',
       });
     }
   }, [])
+
   return (
     <>
-      {credentials?.heading && <h3 className="spectrum-Heading spectrum-Heading--sizeL">{credentials?.heading}</h3>}
+      {credentials?.title && <h3 className="spectrum-Heading spectrum-Heading--sizeL">{credentials?.title}</h3>}
       <div css={css`
           display:flex;
           justify-content:center;
@@ -47,7 +49,7 @@ const Loading = ({
             color: var(--spectrum-dialog-confirm-description-text-color, var(--spectrum-global-color-gray-600));
           `}
         >
-          Creating credentials...
+          {isCreateCredential && "Creating credentials..."}
         </div>
         {downloadStatus &&
           <div