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..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,6 +10,17 @@
     </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 02e1e03487f..910983425ae 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;
+  bottom: 0;
+  left: 50%;
+  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..549080fd490 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,8 @@ 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 +281,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;
+        },
       });
   }