add loading indicator

Author: sprocketc

src/renderer/animations.css

@@ -68,3 +68,9 @@
     transform: translateX(calc(100% + var(--viewport-padding)));
   }
 }
+
+@keyframes spin {
+  100% {
+      transform:rotate(360deg);
+  }
+}

src/renderer/styles.css

@@ -519,3 +519,11 @@ pre {
 .close-button {
   @apply icon-button absolute top-3 right-3 !important;
 }
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -9px 0 0 -9px;
+  animation: spin 4s linear infinite;
+}

src/renderer/toolbar/status.cljs

@@ -99,12 +99,18 @@
 
 (defn root []
   (let [zoom @(rf/subscribe [:document/zoom])
-        timeline? @(rf/subscribe [:panel/visible? :timeline])]
+        timeline? @(rf/subscribe [:panel/visible? :timeline])
+        loading? @(rf/subscribe [:worker/loading?])]
     [:<>
      [:div.toolbar.bg-primary
       [color-v/picker]
       [:div.grow.text-xs.truncate.mx-1
        @(rf/subscribe [:message])]
+      (when loading?
+        [:<>
+         [:span.icon-button.relative
+          [comp/icon "refresh" {:class "loading"}]]
+         [:span.v-divider]])
       (into [:<>]
             (map (fn [{:keys [title active? icon action]}]
                    [comp/radio-icon-button {:title title

src/renderer/worker/subs.cljs

@@ -10,3 +10,9 @@
  :worker/tasks
  :<- [:worker]
  :-> :tasks)
+
+(rf/reg-sub
+ :worker/loading?
+ :<- [:worker/tasks]
+ (fn [tasks]
+   (seq tasks)))