[ML] Ensure loading indicator is present on initial jobs load (#27151) (#27231)

* Show table loading on initial jobs load

* Use async/await and try/catch to catch job load failure

x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js

@@ -98,7 +98,7 @@ class JobsListUI extends Component {
   }
 
   render() {
-    const { intl } = this.props;
+    const { intl, loading } = this.props;
     const selectionControls = {
       selectable: () => true,
       selectableMessage: (selectable) => (!selectable) ? intl.formatMessage({
@@ -253,6 +253,7 @@ class JobsListUI extends Component {
 
     return (
       <EuiBasicTable
+        loading={loading === true}
         itemId="id"
         className={`jobs-list-table ${selectedJobsClass}`}
         items={pageOfItems}
@@ -279,6 +280,10 @@ JobsListUI.propTypes = {
   showStartDatafeedModal: PropTypes.func.isRequired,
   refreshJobs: PropTypes.func.isRequired,
   selectedJobsCount: PropTypes.number.isRequired,
+  loading: PropTypes.bool,
+};
+JobsListUI.defaultProps = {
+  loading: false,
 };
 
 export const JobsList = injectI18n(JobsListUI);

x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js

@@ -42,6 +42,7 @@ export class JobsListView extends Component {
 
     this.state = {
       isRefreshing: false,
+      loading: null,
       jobsSummaryList: [],
       filteredJobsSummaryList: [],
       fullJobsList: {},
@@ -245,39 +246,46 @@ export class JobsListView extends Component {
     this.setState({ isRefreshing: false });
   }
 
-  refreshJobSummaryList(forceRefresh = false) {
+  async refreshJobSummaryList(forceRefresh = false) {
     if (forceRefresh === true || this.blockRefresh === false) {
+
+      // Set loading to true for jobs_list table for initial job loading
+      if (this.state.loading === null) {
+        this.setState({ loading: true });
+      }
+
       const expandedJobsIds = Object.keys(this.state.itemIdToExpandedRowMap);
-      ml.jobs.jobsSummary(expandedJobsIds)
+      try {
-        .then((jobs) => {
+        const jobs = await ml.jobs.jobsSummary(expandedJobsIds);
-          const fullJobsList = {};
+        const fullJobsList = {};
-          const jobsSummaryList = jobs.map((job) => {
+        const jobsSummaryList = jobs.map((job) => {
-            if (job.fullJob !== undefined) {
+          if (job.fullJob !== undefined) {
-              fullJobsList[job.id] = job.fullJob;
+            fullJobsList[job.id] = job.fullJob;
-              delete job.fullJob;
+            delete job.fullJob;
-            }
+          }
-            job.latestTimestampSortValue = (job.latestTimestampMs || 0);
+          job.latestTimestampSortValue = (job.latestTimestampMs || 0);
-            return job;
+          return job;
-          });
-          const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
-          this.setState({ jobsSummaryList, filteredJobsSummaryList, fullJobsList }, () => {
-            this.refreshSelectedJobs();
-          });
-
-          Object.keys(this.updateFunctions).forEach((j) => {
-            this.updateFunctions[j].setState({ job: fullJobsList[j] });
-          });
-
-          this.isDoneRefreshing();
-        })
-        .catch((error) => {
-          console.error(error);
         });
+        const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
+        this.setState({ jobsSummaryList, filteredJobsSummaryList, fullJobsList, loading: false }, () => {
+          this.refreshSelectedJobs();
+        });
+
+        Object.keys(this.updateFunctions).forEach((j) => {
+          this.updateFunctions[j].setState({ job: fullJobsList[j] });
+        });
+
+        this.isDoneRefreshing();
+      } catch (error) {
+        console.error(error);
+        this.setState({ loading: false });
+      }
     }
   }
 
   renderJobsListComponents() {
-    const jobIds = this.state.jobsSummaryList.map(j => j.id);
+    const { loading, jobsSummaryList } = this.state;
+    const jobIds = jobsSummaryList.map(j => j.id);
     return (
       <div>
         <div className="actions-bar">
@@ -301,6 +309,7 @@ export class JobsListView extends Component {
           showStartDatafeedModal={this.showStartDatafeedModal}
           refreshJobs={() => this.refreshJobSummaryList(true)}
           selectedJobsCount={this.state.selectedJobs.length}
+          loading={loading}
         />
         <EditJobFlyout
           setShowFunction={this.setShowEditJobFlyoutFunction}