diff options
| -rw-r--r-- | src/components/experiments/ExperimentListComponent.js | 32 | ||||
| -rw-r--r-- | src/containers/experiments/ExperimentListContainer.js | 1 |
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: [] }; } |