From 6af39686346873abdc835dd92e9f5b3c96f48b5b Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 29 May 2016 11:01:48 -0700
Subject: [PATCH] Added a loading indicator

---
 src/components/Layout/Layout.js                |  5 +++++
 .../LoadingIndicator/LoadingIndicator.js       | 13 +++++++++++++
 .../LoadingIndicator/LoadingIndicator.scss     | 18 ++++++++++++++++++
 src/components/LoadingIndicator/index.js       |  2 ++
 4 files changed, 38 insertions(+)
 create mode 100644 src/components/LoadingIndicator/LoadingIndicator.js
 create mode 100644 src/components/LoadingIndicator/LoadingIndicator.scss
 create mode 100644 src/components/LoadingIndicator/index.js

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index d5bd31fd8..532e8b80c 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -4,6 +4,7 @@ import Link from 'react-router/lib/Link';
 
 import HeaderMenu from './components/HeaderMenu';
 import Flex from 'components/Flex';
+import LoadingIndicator from 'components/LoadingIndicator';
 
 import styles from './Layout.scss';
 import classNames from 'classnames/bind';
@@ -14,11 +15,15 @@ class Layout extends React.Component {
     actions: React.PropTypes.node,
     title: React.PropTypes.node,
     fixed: React.PropTypes.bool,
+    loading: React.PropTypes.bool,
   }
 
   render() {
     return (
       <div className={ styles.container }>
+        { this.props.loading ? (
+          <LoadingIndicator />
+        ) : null }
         <div className={ cx(styles.header, { fixed: this.props.fixed }) }>
           <div className={ styles.teamName }>
             <Link to="/">{ this.props.teamName }</Link>
diff --git a/src/components/LoadingIndicator/LoadingIndicator.js b/src/components/LoadingIndicator/LoadingIndicator.js
new file mode 100644
index 000000000..75f346d4e
--- /dev/null
+++ b/src/components/LoadingIndicator/LoadingIndicator.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import styles from './LoadingIndicator.scss';
+
+const LoadingIndicator = (props) => {
+  return (
+    <div className={ styles.loading }>
+      <div className={ styles.loader }></div>
+    </div>
+  );
+};
+
+export default LoadingIndicator;
\ No newline at end of file
diff --git a/src/components/LoadingIndicator/LoadingIndicator.scss b/src/components/LoadingIndicator/LoadingIndicator.scss
new file mode 100644
index 000000000..02a53167e
--- /dev/null
+++ b/src/components/LoadingIndicator/LoadingIndicator.scss
@@ -0,0 +1,18 @@
+.loader {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #03A9F4;
+}
+
+.loading {
+  background-color: #03A9F4;
+  width: 100%;
+  animation: loading 4s ease-in-out infinite;
+}
+
+@keyframes loading {
+  from {margin-left: -100%; z-index:100;}
+  to {margin-left: 100%; }
+}
diff --git a/src/components/LoadingIndicator/index.js b/src/components/LoadingIndicator/index.js
new file mode 100644
index 000000000..42f308527
--- /dev/null
+++ b/src/components/LoadingIndicator/index.js
@@ -0,0 +1,2 @@
+import LoadingIndicator from './LoadingIndicator';
+export default LoadingIndicator;