Enhance Report Generation by Adding Animation During the Generation Process

[xudongwu-0]

This PR enhances the report generation functionality by adding animation during the process. This PR is a continuation and enhancement of the previous PR:

Adding a button to generate a report for a workflow: #2770
Enhancing Report Generation by adding Operator Results: #2792
Enhancing Report Generation by Adding Operator Json and Comments Section : #2807
Ai Flag: #2818 and #2808

Key Changes:

1. menu.component.html

Added a div with class report-generation-spinner in the menu-content section.
Integrated a conditional *ngIf="isReportGenerating" to toggle the spinner visibility during report generation.
Included the nz-spin component from Ant Design with a “Generating” message for the spinner content.
SCSS Updates:

2. menu.component.scss

Defined new styles for the report-generation-spinner to ensure proper positioning and display behavior (fixed position, centered on the page).
Styled the spinner content, including text alignment and size adjustments for a clean UI.

3. menu.component.ts

Introduced a new boolean variable isReportGenerating in MenuComponent to control the spinner's state.
Updated the onClickGenerateReport method to set isReportGenerating = true when the report generation starts and reset it to false upon completion or error handling.
Enhanced error handling to ensure that the spinner is disabled when report generation fails.

Operation Process:
Click the button below to generate the report with detailed operator results and the workflow snapshot.

[bobbai00]

I think the animation is one kind of notification. You can add a new type of spinning wheel in notification.service.ts to make sure the spinning wheel(or just a message) is lasting when report is generating, and a new message comes out when report generation is finished.

Check this ng zorro component out: https://ng.ant.design/components/notification/en