feat(Time Series): Adds backend data structures to display an activit…

…y Indicator

package.json

@@ -35,6 +35,7 @@
     "react-portal-tooltip": "^2.4.0",
     "react-redux": "^7.0.1",
     "react-scripts": "^2.1.8",
+    "react-spinners": "^0.5.4",
     "redux": "^4.0.0",
     "redux-actions": "^2.2.1",
     "redux-mock-store": "^1.5.1",

src/App.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import Modal from 'react-modal';
 
+import { RingLoader } from 'react-spinners';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { 
   faCheck, faDizzy, faPlus, faHome, faAngleDoubleDown, faAngleDoubleUp,
@@ -63,7 +64,7 @@ class App extends Component {
       controls: true
     },
     selectedFile: null,
-    exportName: "dataset.json"
+    exportName: "dataset.json",
   }
 
   componentWillReceiveProps = (nextProps) =>{
@@ -75,7 +76,7 @@ class App extends Component {
       uuids: uniqueUuids,
       startUuid: startUuid,
       endUuid: endUuid,
-      datasetAdded: datasetAdded
+      datasetAdded: datasetAdded,
     });
   }
 
@@ -168,7 +169,7 @@ class App extends Component {
           'includeControls': this.state.options.controls,
         });
       }
-      this.setState({showOptions: false})
+      this.setState({showOptions: false })
     }
   }
 
@@ -458,6 +459,14 @@ class App extends Component {
             </div>
           </div>
         </Modal>
+        <div className={style.activityIndicatorContainer}>
+          <RingLoader
+            sizeUnit={"px"}
+            size={150}
+            color={'#0277BD'}
+            loading={this.state.busy}
+          />
+        </div>
       </div>
     );
   }

src/App.module.css

@@ -297,4 +297,15 @@ input[name=hideControls]:checked ~ .canvas {
   background-color: #DCDCDC;
   flex-wrap: nowrap !important;
   padding: 0.25em 2em;
+}
+
+.activityIndicatorContainer {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 160px;
+  height: 160px;
 }