From d31dde7436b0d5eceeae8cd3000daa4d99b49606 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Mon, 16 Oct 2017 10:55:19 -0700
Subject: [PATCH] add loading state for cells to ui

---
 src/components/app.js | 13 +++++++++++--
 src/reducers/cells.js |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/app.js b/src/components/app.js
index c43320d1..405342cf 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -4,6 +4,7 @@ import Helmet from "react-helmet";
 import Container from "./framework/container";
 import buttonStyles from "./framework/buttons.css";
 import { connect } from "react-redux";
+import PulseLoader from "halogen/PulseLoader";
 
 import Categorical from "./categorical/categorical";
 import Continuous from "./continuous/continuous";
@@ -16,7 +17,7 @@ import SectionHeader from "./framework/sectionHeader";
 
 @connect((state) => {
   return {
-
+    cells: state.cells
   }
 })
 class Home extends React.Component {
@@ -71,9 +72,17 @@ class Home extends React.Component {
     return (
       <Container>
         <Helmet title="cellxgene" />
+        {
+          this.props.cells.loading ?
+          <div style={{display: "flex", justifyContent: "center"}}>
+            <PulseLoader color="rgb(0,0,0)" size="10px" margin="4px"/>
+            <span style={{marginLeft: 10, fontFamily: globals.accentFont, fontStyle: "italic"}}>loading cells</span>
+          </div> :
+          null
+        }
+        {this.props.cells.error ? "Error loading cells" : null}
         <SectionHeader text="Gene Selection Criteria"/>
         {false ? <Joy data={this.state.expressions && this.state.expressions.data}/> : ""}
-
         <Categorical/>
         <Continuous/>
         <button
diff --git a/src/reducers/cells.js b/src/reducers/cells.js
index 51c4f56b..de5c6d5f 100644
--- a/src/reducers/cells.js
+++ b/src/reducers/cells.js
@@ -12,11 +12,13 @@ const Cells = (state = {
   case "request cells success":
     return Object.assign({}, state, {
       error: null,
+      loading: false,
       cells: action.data,
     });
   case "request cells error":
     return Object.assign({}, state, {
       cells: null,
+      loading: false,
       error: action.data
     });
   default: