Add pending animation in ary form

the-deep · Mar 15, 2024 · cfa0a52 · cfa0a52
1 parent b7ea0c1
commit cfa0a52
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/app/views/EditAry/AssessmentRegistryForm/CnaForm/index.tsx b/app/views/EditAry/AssessmentRegistryForm/CnaForm/index.tsx
@@ -17,7 +17,7 @@ import {
     useFormArray,
 } from '@togglecorp/toggle-form';
 import {
-    NumberOutput,
+    TextOutput,
     Heading,
 } from '@the-deep/deep-ui';
 import {
@@ -156,19 +156,18 @@ function CnaForm(props: Props) {
         <div className={styles.cnaForm}>
             <div className={styles.sectorStats}>
                 {questionPercentage?.map((question) => (
-                    <div
-                        key={question.sector}
+                    <TextOutput
                         className={styles.sectorStatsContent}
-                    >
-                        <NumberOutput
-                            value={question.percentage}
-                            precision={1}
-                            suffix="%"
-                        />
-                        <div>
-                            {question.sector}
-                        </div>
-                    </div>
+                        key={question.sector}
+                        label={question.sector}
+                        value={question.percentage}
+                        valueType="number"
+                        valueProps={{
+                            precision: 1,
+                            suffix: '%',
+                        }}
+                        hideLabelColon
+                    />
                 ))}
             </div>
             {cnaQuestions?.map((cna) => (

diff --git a/app/views/EditAry/AssessmentRegistryForm/CnaForm/styles.css b/app/views/EditAry/AssessmentRegistryForm/CnaForm/styles.css
@@ -6,11 +6,13 @@
 
     .sector-stats {
         display: flex;
-        gap: var(--dui-spacing-medium);
+        flex-wrap: wrap;
+        gap: var(--dui-spacing-small);
 
         .sector-stats-content {
             display: flex;
             flex-direction: column;
+            flex-grow: 1;
             gap: var(--dui-spacing-small);
             background-color: var(--dui-color-background-information);
             padding: var(--dui-spacing-medium);

diff --git a/app/views/EditAry/index.tsx b/app/views/EditAry/index.tsx
@@ -21,6 +21,7 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 import {
+    PendingMessage,
     Button,
     useAlert,
 } from '@the-deep/deep-ui';
@@ -669,6 +670,10 @@ function EditAry(props: Props) {
         ],
     );
 
+    const pending = createAssessmentRegistryPending
+        || assessmentRegistryDataLoading
+        || updateAssessmentRegistryPending;
+
     return (
         <div className={_cs(className, styles.editAssessment)}>
             <SubNavbar
@@ -684,10 +689,7 @@ function EditAry(props: Props) {
                             name="save"
                             type="submit"
                             onClick={handleSubmit}
-                            disabled={pristine
-                                || createAssessmentRegistryPending
-                                || assessmentRegistryDataLoading
-                                || updateAssessmentRegistryPending}
+                            disabled={pending || pristine}
                         >
                             Save
                         </Button>
@@ -706,6 +708,7 @@ function EditAry(props: Props) {
                             entryImagesMap={entryImagesMap}
                         />
                         <div className={styles.form}>
+                            {pending && <PendingMessage />}
                             <AssessmentRegistryForm
                                 projectId={projectId}
                                 className={styles.form}