feat: Update query states to use spinner vs. progress bar (#17804)

* lit

* remove reference for progress bar

* update to loading

* update switch out spinner for loading when progress hits 100

* update test
This commit is contained in:
Hugh A. Miles II
2022-01-05 10:43:42 -08:00
committed by GitHub
parent ceecc7047b
commit 9e69940171
2 changed files with 24 additions and 3 deletions

View File

@@ -19,7 +19,6 @@
import React, { CSSProperties } from 'react';
import ButtonGroup from 'src/components/ButtonGroup';
import Alert from 'src/components/Alert';
import ProgressBar from 'src/components/ProgressBar';
import moment from 'moment';
import { RadioChangeEvent } from 'antd/lib/radio';
import Button from 'src/components/Button';
@@ -36,6 +35,7 @@ import { debounce } from 'lodash';
import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
import ProgressBar from 'src/components/ProgressBar';
import Loading from 'src/components/Loading';
import FilterableTable from 'src/components/FilterableTable/FilterableTable';
import CopyToClipboard from 'src/components/CopyToClipboard';
@@ -801,8 +801,8 @@ export default class ResultSet extends React.PureComponent<
);
}
}
let progressBar;
let trackingUrl;
let progressBar;
if (query.progress > 0) {
progressBar = (
<ProgressBar
@@ -825,14 +825,17 @@ export default class ResultSet extends React.PureComponent<
query && query.extra && query.extra.progress
? query.extra.progress
: null;
return (
<div style={LOADING_STYLES}>
<div>{!progressBar && <Loading position="normal" />}</div>
{/* show loading bar whenever progress bar is completed but needs time to render */}
<div>{query.progress === 100 && <Loading position="normal" />}</div>
<QueryStateLabel query={query} />
<div>
{progressMsg && <Alert type="success" message={progressMsg} />}
</div>
<div>{progressBar}</div>
<div>{query.progress !== 100 && progressBar}</div>
<div>{trackingUrl}</div>
</div>
);