introduce loading state

Author: sprocketc

src/renderer/element/events.cljs

@@ -379,14 +379,17 @@
                   (.drawImage context image 0 0 width height)
                   (p/let [image-data (.getImageData context 0 0 width height)
                           svg (f image-data)]
-                    (rf/dispatch [:element/import-traced-image svg (:name el) position]))))
+                    (rf/dispatch-sync [:element/import-traced-image svg (:name el) position]))))
        (set! (.-src image) data-url)))))
 
 (rf/reg-event-fx
  :element/trace
  (fn [{:keys [db]} [_]]
-   {::->svg [(filter #(= :image (:tag %)) (h/selected db))
-             #(.imagedataToSVG ImageTracer %)]}))
+   (let [images (h/filter-by-tag db :image)]
+     {:db (cond-> db images (assoc :loading "Tracing.."))
+      :fx [[::->svg [(filter #(= :image (:tag %)) (h/selected db))
+                     #(.imagedataToSVG ImageTracer %)]]
+           [:dispatch [:clear-loading]]]})))
 
 (def triangulation-options
   #js {:accuracy 0.5 ; float between 0 and 1
@@ -405,8 +408,11 @@
 (rf/reg-event-fx
  :element/triangulate
  (fn [{:keys [db]} [_]]
-   {::->svg [(filter #(= :image (:tag %)) (h/selected db))
-             #(-> triangulation-options
-                  (triangulate)
-                  (.fromImageDataSync %)
-                  (.toSVG))]}))
+   (let [images (h/filter-by-tag db :image)]
+     {:db (cond-> db images (assoc :loading "Triangulating.."))
+      :fx [[::->svg [(filter #(= :image (:tag %)) (h/selected db))
+                     #(-> triangulation-options
+                          (triangulate)
+                          (.fromImageDataSync %)
+                          (.toSVG))]]
+           [:dispatch [:clear-loading]]]})))

src/renderer/element/handlers.cljs

@@ -247,6 +247,10 @@
   [db]
   (reduce #(conj %1 (:tag %2)) #{} (selected db)))
 
+(defn filter-by-tag
+  [db tag]
+  (filter #(= tag (:tag %)) (selected db)))
+
 (defn select-same-tags
   [db]
   (let [selected-tags (selected-tags db)]

src/renderer/events.cljs

@@ -58,6 +58,11 @@
  (fn [db [_]]
    (dissoc db :restored?)))
 
+(rf/reg-event-db
+ :clear-loading
+ (fn [db [_]]
+   (dissoc db :loading)))
+
 (rf/reg-event-db
  :set-lang
  (fn [db [_ lang]]

src/renderer/styles.css

@@ -137,7 +137,7 @@
   }
 
   .backdrop {
-    @apply absolute inset-0;
+    @apply absolute inset-0 flex items-center justify-center;
     background-color: var(--backdrop);
     backdrop-filter: blur(2px);
   }

src/renderer/subs.cljs

@@ -142,6 +142,10 @@
  :grid?
  :-> :grid?)
 
+(rf/reg-sub
+ :loading
+ :-> :loading)
+
 #_(rf/reg-sub
    :font-options
    :<- [:system-fonts]

src/renderer/theme/styles.css

@@ -41,6 +41,8 @@
 
     --overlay: #fff;
 
+    
+
     --font-color: rgba(0, 0, 0, .8);
     --error-color: #f78484;
     --font-color-disabled: rgba(0, 0, 0, .3);

src/renderer/views.cljs

@@ -175,4 +175,7 @@
           [toolbar.object/root]]]]]
       [home/panel])]
    [dialog/root]
-   [notification/main]])
+   [notification/main]
+   (when-let [loading @(rf/subscribe [:loading])]
+     [:div.backdrop
+      [:div.text-2xl loading]])])