Implement a loader animation

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);
+    }
+}

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)))))

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)
         ()))))