From d8f42b461c0d93d0a419123304e6cc9adc70ba5c Mon Sep 17 00:00:00 2001
From: Jeremy Dormitzer <jdormitzer@hubspot.com>
Date: Thu, 18 Jan 2018 21:47:35 -0500
Subject: [PATCH] Implement a loader animation

---
 ext/css/sidebar.css           | 53 +++++++++++++++++++++++++++++++++++
 src/looped_in/components.cljs |  5 ++++
 src/looped_in/sidebar.cljs    |  2 +-
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/ext/css/sidebar.css b/ext/css/sidebar.css
index b53a6ec..2f57a68 100644
--- a/ext/css/sidebar.css
+++ b/ext/css/sidebar.css
@@ -294,3 +294,56 @@ html, body {
 .iconButton:hover {
     background-color: #d7d7db;
 }
+
+.spinner {
+    margin: 80px auto;
+    width: 50px;
+    height: 40px;
+    text-align: center;
+    font-size: 10px;
+}
+
+.spinner > div {
+    background-color: #b1b1b3;
+    height: 100%;
+    width: 6px;
+    margin: 0 1px 0 1px;
+    display: inline-block;
+    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+    20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+    0%, 40%, 100% {
+        transform: scaleY(0.4);
+        -webkit-transform: scaleY(0.4);
+    }  20% {
+        transform: scaleY(1.0);
+        -webkit-transform: scaleY(1.0);
+    }
+}
diff --git a/src/looped_in/components.cljs b/src/looped_in/components.cljs
index 0e5a75a..cf3a113 100644
--- a/src/looped_in/components.cljs
+++ b/src/looped_in/components.cljs
@@ -4,3 +4,8 @@
 
 (defn card [& children]
   (apply dom/createDom "div" "card" children))
+
+(defn loader []
+  (apply dom/createDom "div" "spinner"
+         (for [i (range 1 6)]
+           (dom/createDom "div" (str "rect" i)))))
diff --git a/src/looped_in/sidebar.cljs b/src/looped_in/sidebar.cljs
index 35e896a..f5dabc1 100644
--- a/src/looped_in/sidebar.cljs
+++ b/src/looped_in/sidebar.cljs
@@ -81,8 +81,8 @@
   [dispatch-message state]
   (log/debug state)
   (if (:loading state)
-    "Loading..."
     (let [current-item (get-in-items (:items state) (:depth state))]
+    (components/loader)
       (if (> (count current-item) 1)
         (map #(components/card (:title %)) current-item)
         ()))))