[reporting] show loading state when creating a reporting job (#154939)

<img width="200" alt="Screen Shot 2023-04-13 at 12 04 26 PM"
src="https://user-images.githubusercontent.com/373691/231845867-303fe34d-5032-49cf-8408-dc7b7725e6e8.png">


### Steps to test
* Load your favorite sample data set and open its dashboard
* Click "Share" and then click "PDF Reports"
* Open browser devtools and open network tab. Turn on network throttling
to better see loading state
* Click "Generate PDF". Notice how button now gives feedback its clicked
and something is happening. Before, button would not show loading state
and users are confused into thinking nothing is happening.

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/reporting_panel_content.tsx

@@ -62,6 +62,7 @@ interface State {
   absoluteUrl: string;
   layoutId: string;
   objectType: string;
+  isCreatingReportJob: boolean;
 }
 
 class ReportingPanelContentUi extends Component<Props, State> {
@@ -78,6 +79,7 @@ class ReportingPanelContentUi extends Component<Props, State> {
       absoluteUrl: this.getAbsoluteReportGenerationUrl(props),
       layoutId: '',
       objectType,
+      isCreatingReportJob: false,
     };
   }
 
@@ -227,12 +229,13 @@ class ReportingPanelContentUi extends Component<Props, State> {
   private renderGenerateReportButton = (isDisabled: boolean) => {
     return (
       <EuiButton
-        disabled={isDisabled}
+        disabled={isDisabled || this.state.isCreatingReportJob}
         fullWidth
         fill
         onClick={this.createReportingJob}
         data-test-subj="generateReportButton"
         size="s"
+        isLoading={this.state.isCreatingReportJob}
       >
         <FormattedMessage
           id="xpack.reporting.panelContent.generateButtonLabel"
@@ -280,6 +283,8 @@ class ReportingPanelContentUi extends Component<Props, State> {
       this.props.getJobParams()
     );
 
+    this.setState({ isCreatingReportJob: true });
+
     return this.props.apiClient
       .createReportingJob(this.props.reportType, decoratedJobParams)
       .then(() => {
@@ -313,6 +318,9 @@ class ReportingPanelContentUi extends Component<Props, State> {
         if (this.props.onClose) {
           this.props.onClose();
         }
+        if (this.mounted) {
+          this.setState({ isCreatingReportJob: false });
+        }
       })
       .catch((error) => {
         this.props.toasts.addError(error, {
@@ -325,6 +333,9 @@ class ReportingPanelContentUi extends Component<Props, State> {
             <span dangerouslySetInnerHTML={{ __html: error.body.message }} />
           ) as unknown as string,
         });
+        if (this.mounted) {
+          this.setState({ isCreatingReportJob: false });
+        }
       });
   };
 }