From cd7febf77ce6a47d60edea597df376c1f9636461 Mon Sep 17 00:00:00 2001
From: Janus-W <2373025856w@gmail.com>
Date: Tue, 17 Sep 2024 19:25:20 +0100
Subject: [PATCH 1/3] add animation when getting report

---
 .../component/menu/menu.component.html        | 11 ++++++++
 .../component/menu/menu.component.scss        | 27 +++++++++++++++++++
 .../component/menu/menu.component.ts          | 11 +++++++-
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/core/gui/src/app/workspace/component/menu/menu.component.html b/core/gui/src/app/workspace/component/menu/menu.component.html
index 861f3c909f5..2f4a94c487f 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.html
+++ b/core/gui/src/app/workspace/component/menu/menu.component.html
@@ -1,4 +1,15 @@
 <div id="menu-container">
+  <div
+    class="report-generation-spinner"
+    *ngIf="isReportGenerating">
+    <div class="spinner-content">
+      <nz-spin
+        [nzSize]="'large'"
+        nzTip="Generating">
+      </nz-spin>
+    </div>
+  </div>
+
   <div
     *ngIf="!userSystemEnabled"
     id="logo">
diff --git a/core/gui/src/app/workspace/component/menu/menu.component.scss b/core/gui/src/app/workspace/component/menu/menu.component.scss
index 02e1e03487f..03b51e20dfc 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.scss
+++ b/core/gui/src/app/workspace/component/menu/menu.component.scss
@@ -106,3 +106,30 @@ texera-user-icon {
 texera-coeditor-user-icon {
   margin-left: -10px;
 }
+
+report-generation-spinner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.spinner-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.ant-spin-text {
+  font-size: 18px;
+  color: #333;
+  margin-top: 10px;
+}
diff --git a/core/gui/src/app/workspace/component/menu/menu.component.ts b/core/gui/src/app/workspace/component/menu/menu.component.ts
index fcbb5163c26..b23baa4e1cb 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.ts
+++ b/core/gui/src/app/workspace/component/menu/menu.component.ts
@@ -53,6 +53,7 @@ import { ReportGenerationService } from "../../service/report-generation/report-
   styleUrls: ["menu.component.scss"],
 })
 export class MenuComponent implements OnInit {
+  public isReportGenerating = false;
   public executionState: ExecutionState; // set this to true when the workflow is started
   public ExecutionState = ExecutionState; // make Angular HTML access enum definition
   public isWorkflowValid: boolean = true; // this will check whether the workflow error or not
@@ -253,6 +254,9 @@ export class MenuComponent implements OnInit {
    * get the html to export all results.
    */
   public onClickGenerateReport(): void {
+
+    this.isReportGenerating = true;
+
     // Get notification
     this.notificationService.info("The report is being generated...");
 
@@ -278,13 +282,18 @@ export class MenuComponent implements OnInit {
                 );
                 // Generate the final report as HTML after all results are retrieved
                 this.reportGenerationService.generateReportAsHtml(workflowSnapshotURL, sortedResults, workflowName);
+                this.isReportGenerating = false;
               },
               error: (error: unknown) => {
                 this.notificationService.error("Error in retrieving operator results: " + (error as Error).message);
+                this.isReportGenerating = false;
               },
             });
         },
-        error: (e: unknown) => this.notificationService.error((e as Error).message),
+        error: (e: unknown) => {
+          this.notificationService.error((e as Error).message);
+          this.isReportGenerating = false;
+        },
       });
   }
 

From 54c785e0945899e3ddf72f7e8fe186b848351e3e Mon Sep 17 00:00:00 2001
From: Janus-W <2373025856w@gmail.com>
Date: Tue, 17 Sep 2024 19:42:20 +0100
Subject: [PATCH 2/3] add animation when getting report

---
 .../component/menu/menu.component.html        | 23 ++++++++++---------
 .../component/menu/menu.component.scss        |  4 ++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/core/gui/src/app/workspace/component/menu/menu.component.html b/core/gui/src/app/workspace/component/menu/menu.component.html
index 2f4a94c487f..44a5773e4c5 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.html
+++ b/core/gui/src/app/workspace/component/menu/menu.component.html
@@ -1,15 +1,4 @@
 <div id="menu-container">
-  <div
-    class="report-generation-spinner"
-    *ngIf="isReportGenerating">
-    <div class="spinner-content">
-      <nz-spin
-        [nzSize]="'large'"
-        nzTip="Generating">
-      </nz-spin>
-    </div>
-  </div>
-
   <div
     *ngIf="!userSystemEnabled"
     id="logo">
@@ -21,6 +10,18 @@
     </a>
   </div>
   <div id="menu-content">
+
+    <div
+      class="report-generation-spinner"
+      *ngIf="isReportGenerating">
+      <div class="spinner-content">
+        <nz-spin
+          [nzSize]="'large'"
+          nzTip="Generating">
+        </nz-spin>
+      </div>
+    </div>
+
     <div
       id="menu-user"
       *ngIf="userSystemEnabled">
diff --git a/core/gui/src/app/workspace/component/menu/menu.component.scss b/core/gui/src/app/workspace/component/menu/menu.component.scss
index 03b51e20dfc..910983425ae 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.scss
+++ b/core/gui/src/app/workspace/component/menu/menu.component.scss
@@ -109,8 +109,8 @@ texera-coeditor-user-icon {
 
 report-generation-spinner {
   position: fixed;
-  top: 0;
-  left: 0;
+  bottom: 0;
+  left: 50%;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0);

From 89d574b0b31051b972e276bef539b6b7110569bb Mon Sep 17 00:00:00 2001
From: Janus-W <2373025856w@gmail.com>
Date: Tue, 17 Sep 2024 19:43:07 +0100
Subject: [PATCH 3/3] yarn format:fix

---
 core/gui/src/app/workspace/component/menu/menu.component.html | 1 -
 core/gui/src/app/workspace/component/menu/menu.component.ts   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/core/gui/src/app/workspace/component/menu/menu.component.html b/core/gui/src/app/workspace/component/menu/menu.component.html
index 44a5773e4c5..c4de62728f8 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.html
+++ b/core/gui/src/app/workspace/component/menu/menu.component.html
@@ -10,7 +10,6 @@
     </a>
   </div>
   <div id="menu-content">
-
     <div
       class="report-generation-spinner"
       *ngIf="isReportGenerating">
diff --git a/core/gui/src/app/workspace/component/menu/menu.component.ts b/core/gui/src/app/workspace/component/menu/menu.component.ts
index b23baa4e1cb..549080fd490 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.ts
+++ b/core/gui/src/app/workspace/component/menu/menu.component.ts
@@ -254,7 +254,6 @@ export class MenuComponent implements OnInit {
    * get the html to export all results.
    */
   public onClickGenerateReport(): void {
-
     this.isReportGenerating = true;
 
     // Get notification