Merge pull request #52 from atlarge-research/feature/46/no-experiments

Show more accurate alert while loading experiments

2 files changed, 25 insertions, 8 deletions

diff --git a/src/components/experiments/ExperimentListComponent.js b/src/components/experiments/ExperimentListComponent.js
index 28c06f29..2f7106e5 100644
--- a/src/components/experiments/ExperimentListComponent.js
+++ b/src/components/experiments/ExperimentListComponent.js
@@ -2,15 +2,30 @@ import PropTypes from "prop-types";
 import React from "react";
 import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer";
 
-const ExperimentListComponent = ({ experimentIds }) => {
+const ExperimentListComponent = ({ experimentIds, loading }) => {
+  let alert;
+
+  if (loading) {
+    alert = (
+      <div className="alert alert-success">
+        <span className="fa fa-refresh fa-spin mr-2" />
+        <strong>Loading Experiments...</strong>
+      </div>
+    );
+  } else if (experimentIds.length === 0 && !loading) {
+    alert = (
+      <div className="alert alert-info">
+        <span className="fa fa-question-circle mr-2" />
+        <strong>No experiments here yet...</strong> Add some with the button
+        below!
+      </div>
+    );
+  }
+
   return (
     <div className="vertically-expanding-container">
-      {experimentIds.length === 0 ? (
-        <div className="alert alert-info">
-          <span className="info-icon fa fa-question-circle mr-2" />
-          <strong>No experiments here yet...</strong> Add some with the button
-          below!
-        </div>
+      {alert ? (
+        alert
       ) : (
         <table className="table table-striped">
           <thead>
@@ -37,7 +52,8 @@ const ExperimentListComponent = ({ experimentIds }) => {
 };
 
 ExperimentListComponent.propTypes = {
-  experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired
+  experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  loading: PropTypes.bool
 };
 
 export default ExperimentListComponent;
diff --git a/src/containers/experiments/ExperimentListContainer.js b/src/containers/experiments/ExperimentListContainer.js
index 632942bf..53bb1dad 100644
--- a/src/containers/experiments/ExperimentListContainer.js
+++ b/src/containers/experiments/ExperimentListContainer.js
@@ -7,6 +7,7 @@ const mapStateToProps = state => {
     !("experimentIds" in state.objects.simulation[state.currentSimulationId])
   ) {
     return {
+      loading: true,
       experimentIds: []
     };
   }