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 = () => ( + + + + + +); + const Modal = ({ close, title, children }) => ( @@ -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 ( - {embedded === false && ( + {embedded === false ? ( } > - + {isLoading ? ( + + ) : ( + + )} )} - )} - {embedded === true && ( - + ) : ( + + {isLoading ? ( + + ) : ( + + )} + )} );