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

superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx

@@ -24,6 +24,7 @@ import { Provider } from 'react-redux';
 import sinon from 'sinon';
 import Alert from 'src/components/Alert';
 import ProgressBar from 'src/components/ProgressBar';
+import Loading from 'src/components/Loading';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import fetchMock from 'fetch-mock';
@@ -63,6 +64,18 @@ const mockedProps = {
 };
 const stoppedQueryProps = { ...mockedProps, query: stoppedQuery };
 const runningQueryProps = { ...mockedProps, query: runningQuery };
+const fetchingQueryProps = {
+  ...mockedProps,
+  query: {
+    dbId: 1,
+    cached: false,
+    ctas: false,
+    id: 'ryhHUZCGb',
+    progress: 100,
+    state: 'fetching',
+    startDttm: Date.now() - 500,
+  },
+};
 const cachedQueryProps = { ...mockedProps, query: cachedQuery };
 const failedQueryWithErrorMessageProps = {
   ...mockedProps,
@@ -179,6 +192,11 @@ test('should render running/pending/fetching query', () => {
   expect(wrapper.find(ProgressBar)).toExist();
 });
 
+test('should render fetching w/ 100 progress query', () => {
+  const wrapper = shallow(<ResultSet {...fetchingQueryProps} />);
+  expect(wrapper.find(Loading)).toExist();
+});
+
 test('should render a failed query with an error message', () => {
   const wrapper = shallow(<ResultSet {...failedQueryWithErrorMessageProps} />);
   expect(wrapper.find(ErrorMessageWithStackTrace)).toExist();

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -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>
     );