feat: Add an activity indicator

closes IQTLabs#291

src/App.js

@@ -14,7 +14,8 @@ import {
   selectDatasets, getLastUpdated, removeDataset,getKeyFields, getIgnoredFields
 } from 'domain/dataset';
 import { 
-  setHierarchyConfig, showNodes, colorBy, selectControls, setStartDataset, setEndDataset
+  setHierarchyConfig, showNodes, colorBy, selectControls, setStartDataset, setEndDataset,
+  showBusy
 } from 'domain/controls';
 import { getError, clearError } from "domain/error";
 import { removeSearchIndex } from "epics/index-dataset-epic";
@@ -161,13 +162,14 @@ class App extends Component {
   processOptions = () => {
     if(this.state.options.action === IMPORT)
     {
+      this.props.showBusy(true);
       if(this.state.selectedFile){
         this.props.uploadDataset({
           'owner': uuidv4(),
           'file': this.state.selectedFile,
           'includeData': this.state.options.data,
           'includeControls': this.state.options.controls,
-        });
+        })
       }
       this.setState({showOptions: false })
     }
@@ -464,7 +466,7 @@ class App extends Component {
             sizeUnit={"px"}
             size={150}
             color={'#0277BD'}
-            loading={this.state.busy}
+            loading={this.props.shouldShowBusy}
           />
         </div>
       </div>
@@ -490,7 +492,8 @@ const mapStateToProps = state => {
     fullDatasets: datasets,
     controls: controls,
     keyFields: getKeyFields(state),
-    ignoredFields: getIgnoredFields(state)
+    ignoredFields: getIgnoredFields(state),
+    shouldShowBusy: controls.showBusy,
   }
 }
 
@@ -503,7 +506,8 @@ const mapDispatchToProps = {
   removeSearchIndex,
   setStartDataset,
   setEndDataset,
-  uploadDataset
+  uploadDataset,
+  showBusy,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

src/domain/controls.js

@@ -30,8 +30,6 @@ const reducer = handleActions(
       const colorBy = payload.colorBy || state.colorBy;
       const start = payload.start || state.start;
       const end = payload.end || state.end;
-      console.log("payload show busy: %o", payload.showBusy);
-      console.log(('showBusy' in payload));
       const showBusy = ('showBusy' in payload) ? !!payload.showBusy : state.showBusy;
       return { 
         ...state,

src/epics/load-dataset-epic.js

@@ -8,7 +8,7 @@ import { buildIndices } from './index-dataset-epic';
 
 import { setError } from "domain/error"
 import { setDatasets, setKeyFields, setIgnoredFields, configureDataset } from "domain/dataset";
-import { setControls } from "domain/controls";
+import { setControls, showBusy } from "domain/controls";
 
 const loadDataset = createAction("LOAD_DATASET");
 
@@ -25,6 +25,7 @@ const loadDatasetEpic = (action$, store) => {
             ,setIgnoredFields(payload.ignoredFields)
             ,setControls(payload.controls)
             ,buildIndices(payload)
+            ,showBusy(false)
           )
         })
         ,catchError((error) => {

src/features/dataset-controls/DatasetControls.js

@@ -14,7 +14,8 @@ import { startRefresh, stopRefresh } from "epics/refresh-dataset-epic";
 import { uploadDataset } from "epics/upload-dataset-epic";
 import { removeSearchIndex } from "epics/index-dataset-epic";
 import {
-  showNodes, setHierarchyConfig, colorBy, selectControls, setStartDataset, setEndDataset
+  showNodes, setHierarchyConfig, colorBy, selectControls, setStartDataset,
+  setEndDataset, showBusy
 } from "domain/controls"
 
 import { setError } from "domain/error"
@@ -96,6 +97,7 @@ class DatasetControls extends React.Component {
   }
 
   fetchAndSetDataset = (url, dataset, username, password, token) => {
+    this.props.showBusy(true);
     this.props.setIsFetching({owner: this.props.uuid, isFetching: true});
     const authHeader = buildAuthHeader(username, password, token);
     if (toURL(url)) {
@@ -197,6 +199,7 @@ class DatasetControls extends React.Component {
 
   onUploadOk = () =>{
     if(this.state.selectedFile){
+      this.props.showBusy(true);
       this.props.uploadDataset({ 
         'owner': this.props.uuid,
         'name':this.props.name,
@@ -508,7 +511,8 @@ DatasetControls.propTypes = {
   fullDatasets: PropTypes.object,
   controls: PropTypes.object,
   keyFields: PropTypes.array,
-  ignoredFields: PropTypes.array
+  ignoredFields: PropTypes.array,
+  showBusy: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -542,7 +546,8 @@ const mapDispatchToProps = {
   colorBy,
   startRefresh,
   stopRefresh,
-  setError
+  setError,
+  showBusy
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(DatasetControls);