From aa8dbe5626a9a023812d73d260610ceee73b97af Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sat, 30 Apr 2016 13:24:13 -0700
Subject: [PATCH] Loading screen

---
 .../AtlasPreviewLoading.js                    | 18 +++++++++++++
 .../AtlasPreviewLoading.scss                  | 26 +++++++++++++++++++
 src/components/AtlasPreviewLoading/index.js   |  2 ++
 src/scenes/Dashboard/Dashboard.js             |  6 ++++-
 src/scenes/Dashboard/Dashboard.scss           |  7 +++++
 src/utils/random.js                           |  7 +++++
 6 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AtlasPreviewLoading/AtlasPreviewLoading.js
 create mode 100644 src/components/AtlasPreviewLoading/AtlasPreviewLoading.scss
 create mode 100644 src/components/AtlasPreviewLoading/index.js
 create mode 100644 src/utils/random.js

diff --git a/src/components/AtlasPreviewLoading/AtlasPreviewLoading.js b/src/components/AtlasPreviewLoading/AtlasPreviewLoading.js
new file mode 100644
index 000000000..edb61a6a4
--- /dev/null
+++ b/src/components/AtlasPreviewLoading/AtlasPreviewLoading.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './AtlasPreviewLoading.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+import { randomInteger } from 'utils/random';
+
+export default (props) => {
+  return (
+    <div className={ cx(styles.container, styles.animated) }>
+      <div className={ cx(styles.mask, styles.header) } style={{ width: `${randomInteger(65,80)}%` }}>&nbsp;</div>
+      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
+      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
+      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/AtlasPreviewLoading/AtlasPreviewLoading.scss b/src/components/AtlasPreviewLoading/AtlasPreviewLoading.scss
new file mode 100644
index 000000000..1d2fd414a
--- /dev/null
+++ b/src/components/AtlasPreviewLoading/AtlasPreviewLoading.scss
@@ -0,0 +1,26 @@
+.mask {
+  display: flex;
+  width: 100%;
+  background-color: #ddd;
+}
+
+.header {
+  height: 28px;
+  margin-bottom: 32px;
+}
+
+.bodyText {
+  height: 18px;
+  margin-bottom: 14px;
+}
+
+.animated {
+  width: 100%;
+  animation: PULSATE 1.3s infinite;
+}
+
+@keyframes PULSATE {
+  0%   { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
\ No newline at end of file
diff --git a/src/components/AtlasPreviewLoading/index.js b/src/components/AtlasPreviewLoading/index.js
new file mode 100644
index 000000000..ecf2a2045
--- /dev/null
+++ b/src/components/AtlasPreviewLoading/index.js
@@ -0,0 +1,2 @@
+import AtlasPreviewLoading from './AtlasPreviewLoading';
+export default AtlasPreviewLoading;
\ No newline at end of file
diff --git a/src/scenes/Dashboard/Dashboard.js b/src/scenes/Dashboard/Dashboard.js
index ef26cecdd..e8d1403b0 100644
--- a/src/scenes/Dashboard/Dashboard.js
+++ b/src/scenes/Dashboard/Dashboard.js
@@ -6,6 +6,8 @@ import { replace } from 'react-router-redux';
 import { client } from 'utils/ApiClient';
 
 import Layout from 'components/Layout';
+import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+
 import styles from './Dashboard.scss';
 
 class Dashboard extends React.Component {
@@ -18,7 +20,9 @@ class Dashboard extends React.Component {
       <Layout
         header={<div>header!</div>}
       >
-        holla!
+        <div className={ styles.content }>
+          <AtlasPreviewLoading />
+        </div>
       </Layout>
     );
   }
diff --git a/src/scenes/Dashboard/Dashboard.scss b/src/scenes/Dashboard/Dashboard.scss
index e69de29bb..a2dad1f88 100644
--- a/src/scenes/Dashboard/Dashboard.scss
+++ b/src/scenes/Dashboard/Dashboard.scss
@@ -0,0 +1,7 @@
+.content {
+  display: flex;
+  flex: 1;
+  max-width: 600px;
+
+  margin: 40px 20px;
+}
\ No newline at end of file
diff --git a/src/utils/random.js b/src/utils/random.js
new file mode 100644
index 000000000..50c05eaf4
--- /dev/null
+++ b/src/utils/random.js
@@ -0,0 +1,7 @@
+const randomInteger = (min, max) => {
+  return Math.floor(Math.random()*(max-min+1)+min);
+}
+
+export {
+  randomInteger
+};
\ No newline at end of file