Merge pull request #3069 from glific/fix/loading

Added loading for upload contacts dialogbox
glific · Sep 6, 2024 · 7a38f90 · 7a38f90
2 parents 45ccc4d + a3bbb29
commit 7a38f90
Showing 1 changed file with 32 additions and 27 deletions.
diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx
@@ -45,6 +45,11 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
     },
   });
 
+  let groupOptions = [];
+  if (collections && collections.groups) {
+    groupOptions = collections.groups;
+  }
+
   const [importContacts] = useMutation(IMPORT_CONTACTS, {
     onCompleted: (data: any) => {
       const { errors } = data.importContacts;
@@ -73,10 +78,6 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
     });
   };
 
-  if (loading || !collections) {
-    return <Loading />;
-  }
-
   const validationSchema = Yup.object().shape({
     collection: Yup.object().nullable().required(t('Collection is required')),
     optedIn: Yup.boolean()
@@ -89,7 +90,7 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
       component: AutoComplete,
       name: 'collection',
       placeholder: t('Select collection'),
-      options: collections.groups,
+      options: groupOptions,
       multiple: false,
       optionLabel: 'label',
       label: t('Collection'),
@@ -105,7 +106,7 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
     },
   ];
 
-  const form = (
+  return (
     <Formik
       enableReinitialize
       validationSchema={validationSchema}
@@ -132,33 +133,37 @@ export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContact
             alignButtons="left"
             disableOk={!csvContent}
           >
-            <div className={styles.Fields}>
-              {formFieldItems.map((field: any) => (
-                <Field {...field} key={field.name} />
-              ))}
-            </div>
+            {loading ? (
+              <Loading />
+            ) : (
+              <>
+                <div className={styles.Fields}>
+                  {formFieldItems.map((field: any) => (
+                    <Field {...field} key={field.name} />
+                  ))}
+                </div>
 
-            <div className={styles.ImportContainer}>
-              <ImportButton
-                id={'uploadcontacts'}
-                title={fileName || 'Select file'}
-                afterImport={(result: string, media: any) => {
-                  setFileName(media.name);
-                  setCsvContent(result);
-                }}
-                fileType=".csv"
-              />
-            </div>
-            <div className={styles.Sample}>
-              <a href={UPLOAD_CONTACTS_SAMPLE}>Download Sample</a>
-            </div>
+                <div className={styles.ImportContainer}>
+                  <ImportButton
+                    id={'uploadcontacts'}
+                    title={fileName || 'Select file'}
+                    afterImport={(result: string, media: any) => {
+                      setFileName(media.name);
+                      setCsvContent(result);
+                    }}
+                    fileType=".csv"
+                  />
+                </div>
+                <div className={styles.Sample}>
+                  <a href={UPLOAD_CONTACTS_SAMPLE}>Download Sample</a>
+                </div>
+              </>
+            )}
           </DialogBox>
         </Form>
       )}
     </Formik>
   );
-
-  return <>{form}</>;
 };
 
 export default UploadContactsDialog;