⚡ Schedule thumbnail component updates

common/src/app/common/geom/align.cljc

@@ -6,10 +6,8 @@
 
 (ns app.common.geom.align
   (:require
-   [app.common.geom.point :as gpt]
    [app.common.geom.rect :as grc]
-   [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes :as gsh]   ))
-   [app.common.pages.helpers :refer [get-children]]))
 
 ;; --- Alignment
 

frontend/src/app/main/data/workspace/libraries.cljs

@@ -310,8 +310,7 @@
             (when-not (empty? (:redo-changes changes))
               (rx/of (dch/commit-changes changes)
                      (dws/select-shapes (d/ordered-set (:id root)))
-                     (ptk/data-event :layout/update parents)
+                     (ptk/data-event :layout/update parents)))))))))
-                     (dwt/update-thumbnail file-id page-id (:id root))))))))))
 
 (defn add-component
   "Add a new component to current file library, from the currently selected shapes.
@@ -731,12 +730,8 @@
       (let [data            (get state :workspace-data)
             component       (ctkl/get-component data component-id)
             page-id         (:main-instance-page component)
-            root-id         (:main-instance-id component)
+            root-id         (:main-instance-id component)]
-            current-file-id (:current-file-id state)]
+           (rx/of (dwt/update-thumbnail file-id page-id root-id))))))
-           (rx/of
-            (dwt/update-thumbnail current-file-id page-id root-id)
-            (when (not= current-file-id file-id)
-              (dwt/update-thumbnail file-id page-id root-id)))))))
 
 (defn update-component-in-bulk
   [shapes file-id]
@@ -899,11 +894,13 @@
    in the current file and in the copies. And also update its thumbnails."
   [component-id file-id undo-group]
   (ptk/reify ::component-changed
+    cljs.core/IDeref
+    (-deref [_] [component-id file-id])
+
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/of
-       (launch-component-sync component-id file-id undo-group)
+       (launch-component-sync component-id file-id undo-group)))))
-       (update-component-thumbnail component-id file-id)))))
 
 (defn watch-component-changes
   "Watch the state for changes that affect to any main instance. If a change is detected will throw
@@ -914,7 +911,7 @@
     (watch [_ state stream]
       (let [components-v2? (features/active-feature? state :components-v2)
 
-            stopper
+            stopper-s
             (->> stream
                  (rx/filter #(or (= ::dw/finalize-page (ptk/type %))
                                  (= ::watch-component-changes (ptk/type %)))))
@@ -928,7 +925,7 @@
                  (rx/buffer 3 1)
                  (rx/filter (fn [[old-data]] (some? old-data))))
 
-            change-s
+            changes-s
             (->> stream
                  (rx/filter #(or (dch/commit-changes? %)
                                  (ptk/type? % ::dwn/handle-file-change)))
@@ -945,20 +942,38 @@
                              (map (partial ch/components-changed old-data))
                              (reduce into #{})))]
 
-                  (when (and (d/not-empty? changed-components) save-undo?)
+                  (if (and (d/not-empty? changed-components) save-undo?)
-                    (log/info :msg "DETECTED COMPONENTS CHANGED"
+                    (do (log/info :msg "DETECTED COMPONENTS CHANGED"
-                              :ids (map str changed-components)
+                                  :ids (map str changed-components)
-                              :undo-group undo-group)
+                                  :undo-group undo-group)
 
-                    (->> changed-components
+                        (->> (rx/from changed-components)
-                         (map #(component-changed % (:id old-data) undo-group))
+                             (rx/map #(component-changed % (:id old-data) undo-group))))
-                         (run! st/emit!))))))]
+                    (rx/empty)))))
+
+            changes-s
+            (->> changes-s
+                 (rx/with-latest-from workspace-data-s)
+                 (rx/mapcat check-changes)
+                 (rx/share))
+
+            notifier-s
+            (->> changes-s
+                 (rx/debounce 5000)
+                 (rx/tap #(log/trc :hint "buffer initialized")))]
 
         (when components-v2?
-          (->> change-s
+          (->> (rx/merge
-               (rx/with-latest-from workspace-data-s)
+                changes-s
-               (rx/map check-changes)
+
-               (rx/take-until stopper)))))))
+                (->> changes-s
+                     (rx/map deref)
+                     (rx/buffer-until notifier-s)
+                     (rx/mapcat #(into #{} %))
+                     (rx/map (fn [[component-id file-id]]
+                               (update-component-thumbnail component-id file-id)))))
+
+               (rx/take-until stopper-s)))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Backend interactions

frontend/src/app/main/data/workspace/thumbnails.cljs

@@ -105,7 +105,7 @@
         (update state :workspace-thumbnails assoc new-id thumbnail)))))
 
 (defn update-thumbnail
-  "Updates the thumbnail information for the given frame `id`"
+  "Updates the thumbnail information for the given `id`"
 
   [file-id page-id frame-id]
   (let [object-id (fmt-object-id file-id page-id frame-id)]
@@ -256,4 +256,3 @@
                              (update-thumbnail file-id page-id frame-id)))))
 
              (rx/take-until stopper-s))))))
-

frontend/src/app/main/ui/shapes/frame.cljs

@@ -134,11 +134,11 @@
      [:image.frame-thumbnail
       {:id (dm/str "thumbnail-" shape-id)
        :href thumb
-       :decoding "async"
        :x bx
        :y by
        :width bw
        :height bh
+       :decoding "async"
        :style {:filter (when (and (not ^boolean safari?) ^boolean debug?) "sepia(1)")}}]
 
      ;; Safari don't support filters so instead we add a rectangle around the thumbnail

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -33,6 +33,7 @@
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
    [app.util.i18n :as i18n :refer [tr]]
+   ;; [app.util.timers :as tm]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [potok.core :as ptk]
@@ -70,6 +71,14 @@
   [{:keys [file-id root-shape component container]}]
   (let [retry (mf/use-state 0)
         thumbnail-uri (get-component-thumbnail-uri file-id component)]
+
+    ;; NOTE: We don't schedule the thumbnail generation on idle right now
+    ;; until we can queue and handle thumbnail batching properly.
+    #_(mf/with-effect []
+      (when-not (some? thumbnail-uri)
+        (tm/schedule-on-idle
+         #(st/emit! (dwl/update-component-thumbnail (:id component) file-id)))))
+
     (if (some? thumbnail-uri)
       [:img {:src thumbnail-uri
              :on-error (fn []