IO-869 Report Email Subject Lines issue

bodyshop_translations.babel

@@ -10761,6 +10761,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>generatingemail</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>preview</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/email-overlay/email-overlay.container.jsx

@@ -1,4 +1,4 @@
-import { Form, Modal, notification } from "antd";
+import { Divider, Form, Modal, notification } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -18,6 +18,7 @@ import RenderTemplate from "../../utils/RenderTemplate";
 import { EmailSettings } from "../../utils/TemplateConstants";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 
 const mapStateToProps = createStructuredSelector({
   modalVisible: selectEmailVisible,
@@ -123,8 +124,14 @@ export function EmailOverlayContainer({
       okButtonProps={{ loading: sending }}
     >
       <Form layout="vertical" form={form} onFinish={handleFinish}>
-        {loading && <LoadingSpinner />}
+        {loading && (
-        <EmailOverlayComponent form={form} />
+          <div>
+            <LoadingSkeleton />
+            <Divider>{t("emails.labels.preview")}</Divider>
+            <LoadingSpinner message={t("emails.labels.generatingemail")} />
+          </div>
+        )}
+        {!loading && <EmailOverlayComponent form={form} />}
       </Form>
     </Modal>
   );

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -71,6 +71,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
       },
       {
         to: values.to,
+        subject: Templates[values.key]?.subject,
       },
       values.email ? "e" : "p"
     );

client/src/translations/en_us/common.json

@@ -693,6 +693,7 @@
 			},
 			"labels": {
 				"attachments": "Attachments",
+				"generatingemail": "Generating email...",
 				"preview": "Email Preview"
 			},
 			"successes": {

client/src/translations/es/common.json

@@ -693,6 +693,7 @@
 			},
 			"labels": {
 				"attachments": "",
+				"generatingemail": "",
 				"preview": ""
 			},
 			"successes": {

client/src/translations/fr/common.json

@@ -693,6 +693,7 @@
 			},
 			"labels": {
 				"attachments": "",
+				"generatingemail": "",
 				"preview": ""
 			},
 			"successes": {