diff --git a/x-pack/legacy/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap b/x-pack/legacy/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap
index fb6b9c7c9db6..f7752a1ae25a 100644
--- a/x-pack/legacy/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/application/components/validate_job/__snapshots__/validate_job_view.test.js.snap
@@ -86,7 +86,7 @@ exports[`ValidateJob renders the button 1`] = `
       iconSide="right"
       iconType="questionInCircle"
       isDisabled={false}
-      isLoading={false}
+      isLoading={true}
       onClick={[Function]}
       size="s"
     >
diff --git a/x-pack/legacy/plugins/ml/public/application/components/validate_job/validate_job_view.js b/x-pack/legacy/plugins/ml/public/application/components/validate_job/validate_job_view.js
index 9b92265c4034..a5ed7c3753b2 100644
--- a/x-pack/legacy/plugins/ml/public/application/components/validate_job/validate_job_view.js
+++ b/x-pack/legacy/plugins/ml/public/application/components/validate_job/validate_job_view.js
@@ -21,6 +21,9 @@ import {
   EuiOverlayMask,
   EuiSpacer,
   EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -38,7 +41,7 @@ const defaultIconType = 'questionInCircle';
 const getDefaultState = () => ({
   ui: {
     iconType: defaultIconType,
-    isLoading: false,
+    isLoading: true,
     isModalVisible: false,
   },
   data: {
@@ -150,6 +153,14 @@ Callout.propTypes = {
   }),
 };
 
+const LoadingSpinner = () => (
+  <EuiFlexGroup justifyContent="spaceAround" alignItems="center">
+    <EuiFlexItem grow={false}>
+      <EuiLoadingSpinner size="xl" />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
 const Modal = ({ close, title, children }) => (
   <EuiOverlayMask>
     <EuiModal onClose={close} style={{ width: '800px' }}>
@@ -249,10 +260,11 @@ export class ValidateJob extends Component {
     const isDisabled = this.props.isDisabled !== true ? false : true;
     const embedded = this.props.embedded === true;
     const idFilterList = this.props.idFilterList || [];
+    const isLoading = this.state.ui.isLoading;
 
     return (
       <Fragment>
-        {embedded === false && (
+        {embedded === false ? (
           <div>
             <EuiButton
               onClick={this.validate}
@@ -261,7 +273,7 @@ export class ValidateJob extends Component {
               iconType={isCurrentJobConfig ? this.state.ui.iconType : defaultIconType}
               iconSide="right"
               isDisabled={isDisabled}
-              isLoading={this.state.ui.isLoading}
+              isLoading={isLoading}
             >
               <FormattedMessage
                 id="xpack.ml.validateJob.validateJobButtonLabel"
@@ -280,7 +292,11 @@ export class ValidateJob extends Component {
                   />
                 }
               >
-                <MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
+                {isLoading ? (
+                  <LoadingSpinner />
+                ) : (
+                  <MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
+                )}
 
                 <EuiText>
                   <FormattedMessage
@@ -308,9 +324,14 @@ export class ValidateJob extends Component {
               </Modal>
             )}
           </div>
-        )}
-        {embedded === true && (
-          <MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
+        ) : (
+          <Fragment>
+            {isLoading ? (
+              <LoadingSpinner />
+            ) : (
+              <MessageList messages={this.state.data.messages} idFilterList={idFilterList} />
+            )}
+          </Fragment>
         )}
       </Fragment>
     );