Core 5001 about repo improvements (#1231)

* CORE-5001: add loader to form * CORE-5001: fix loading bar * CORE-5014: add research nav link
oacore · Oct 2, 2024 · 42b4bbd · 42b4bbd
1 parent d7a98d2
commit 42b4bbd
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 30 deletions.
diff --git a/design-v2/benefits/benefitsForm.jsx b/design-v2/benefits/benefitsForm.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Button, Modal, TextField } from '@oacore/design/lib'
+import { Spinner } from 'reactstrap'
 
 import styles from './styles.module.scss'
 import generateFormMessage from '../../templates/data-providers/utils/generate-form-message'
@@ -42,6 +43,7 @@ const BenefitsForm = React.forwardRef(({ onSubmit, setModalActive }, ref) => {
   const [dataProvidersResponse, setDataProvidersResponse] = useState([])
   const [modalContent, setModalContent] = useState(null)
   const [formSubmitted, setFormSubmitted] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
 
   const {
     value: uri,
@@ -58,10 +60,20 @@ const BenefitsForm = React.forwardRef(({ onSubmit, setModalActive }, ref) => {
   const onCloseModal = () => {
     setModalActive(false)
   }
+
   const handleSubmit = async (event) => {
     event.preventDefault()
-
+    setIsLoading(true)
     if (onSubmit) await onSubmit(event)
+    await checkDataProviders({
+      params: {
+        uri,
+        email,
+        setIsDataProviderAddActive,
+        setDataProvidersResponse,
+      },
+    })
+    setIsLoading(false)
   }
 
   const message = generateFormMessage({ dataProvidersResponse })
@@ -178,23 +190,17 @@ const BenefitsForm = React.forwardRef(({ onSubmit, setModalActive }, ref) => {
               <Button variant="text" onClick={onCloseModal}>
                 cancel
               </Button>
-              <Button
-                className={styles.buttonCustom}
-                type="submit"
-                variant="contained"
-                onClick={() => {
-                  checkDataProviders({
-                    params: {
-                      uri,
-                      email,
-                      setIsDataProviderAddActive,
-                      setDataProvidersResponse,
-                    },
-                  })
-                }}
-              >
-                Submit
-              </Button>
+              {isLoading ? (
+                <Spinner color="primary" className={styles.spinLoader} />
+              ) : (
+                <Button
+                  className={styles.buttonCustom}
+                  type="submit"
+                  variant="contained"
+                >
+                  Submit
+                </Button>
+              )}
             </div>
           </form>
         </Modal>

diff --git a/design-v2/benefits/styles.module.scss b/design-v2/benefits/styles.module.scss
@@ -387,6 +387,14 @@ $spacer: 1.5rem;
       margin-left: 1rem;
     }
   }
+
+  .spin-loader {
+    width: 28px;
+    height: 28px;
+    margin-right: 10px;
+    border: 0.2em solid currentcolor;
+    border-right-color: transparent;
+  }
 }
 
 .modal-step-form {

diff --git a/pages/about/index.jsx b/pages/about/index.jsx
@@ -209,7 +209,17 @@ const AboutPage = ({ data }) => {
       >
         <ServiceGroups className="text-left" items={servicesData.sections} />
       </RelatedContentSection>
-
+      <RelatedContentSection
+        id="research-outputs"
+        caption="Research"
+        data={{
+          ...data.research,
+          action: {
+            label: data.research.actionLabel,
+            href: '/about/research-outputs',
+          },
+        }}
+      />
       <Section id="team" caption={data.team.shortTitle}>
         <h2>{data.team.title}</h2>
         <Row className="list-unstyled" tag="ul">
@@ -245,17 +255,6 @@ const AboutPage = ({ data }) => {
         </Content>
       </Section>
 
-      <RelatedContentSection
-        id="research-outputs"
-        data={{
-          ...data.research,
-          action: {
-            label: data.research.actionLabel,
-            href: '/about/research-outputs',
-          },
-        }}
-      />
-
       <Section id="resources" caption={data.resources.shortTitle}>
         <h2>{data.resources.title}</h2>
         <Row className="list-unstyled" tag="ul">