From 651230d40fc400b5b1bb288419579f49055c7a29 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 24 May 2021 12:30:28 +0200
Subject: [PATCH] :bug: Fix problem with Safari and render frames

---
 .../src/app/main/ui/shapes/fill_image.cljs    |  5 ++--
 frontend/src/app/main/ui/shapes/image.cljs    | 10 ++++---
 .../viewport/thumbnail_renderer.cljs          | 26 +++++++++++--------
 frontend/src/app/util/timers.cljs             |  5 ++--
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/main/ui/shapes/fill_image.cljs b/frontend/src/app/main/ui/shapes/fill_image.cljs
index 17d13291bb..76acb5b070 100644
--- a/frontend/src/app/main/ui/shapes/fill_image.cljs
+++ b/frontend/src/app/main/ui/shapes/fill_image.cljs
@@ -23,7 +23,7 @@
       (let [{:keys [x y width height]} (:selrect shape)
             fill-image-id (str "fill-image-" render-id)
             media (:fill-image shape)
-            uri (image/use-image-uri media)
+            {:keys [uri loading]} (image/use-image-uri media)
             transform (gsh/transform-matrix shape)]
 
         [:pattern {:id fill-image-id
@@ -32,7 +32,8 @@
                    :y y
                    :height height
                    :width width
-                   :patternTransform transform}
+                   :patternTransform transform
+                   :data-loading (str loading)}
          [:image {:xlinkHref uri
                   :width width
                   :height height}]]))))
diff --git a/frontend/src/app/main/ui/shapes/image.cljs b/frontend/src/app/main/ui/shapes/image.cljs
index 45ceb303b7..124ce7052d 100644
--- a/frontend/src/app/main/ui/shapes/image.cljs
+++ b/frontend/src/app/main/ui/shapes/image.cljs
@@ -35,7 +35,8 @@
               (rx/mapcat wapi/read-file-as-data-url)
               (rx/subs #(reset! data-uri  %))))))
 
-    (or @data-uri uri)))
+    {:uri (or @data-uri uri)
+     :loading (not (some? @data-uri))}))
 
 (mf/defc image-shape
   {::mf/wrap-props false}
@@ -43,7 +44,7 @@
 
   (let [shape (unchecked-get props "shape")
         {:keys [id x y width height rotation metadata]} shape
-        uri (use-image-uri metadata)]
+        {:keys [uri loading]} (use-image-uri metadata)]
 
     (let [transform (geom/transform-matrix shape)
           props (-> (attrs/extract-style-attrs shape)
@@ -53,7 +54,10 @@
                           :transform transform
                           :width width
                           :height height
-                          :preserveAspectRatio "none"}))
+                          :preserveAspectRatio "none"})
+                    (cond-> loading
+                      (obj/set! "data-loading" "true")))
+
           on-drag-start (fn [event]
                           ;; Prevent browser dragging of the image
                           (dom/prevent-default event))]
diff --git a/frontend/src/app/main/ui/workspace/viewport/thumbnail_renderer.cljs b/frontend/src/app/main/ui/workspace/viewport/thumbnail_renderer.cljs
index 79b41e0d3c..dc6d5eb694 100644
--- a/frontend/src/app/main/ui/workspace/viewport/thumbnail_renderer.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/thumbnail_renderer.cljs
@@ -29,16 +29,19 @@
            (when node
              (let [img-node (mf/ref-val thumbnail-img)]
                (timers/schedule-on-idle
-                #(if-let [frame-node (dom/get-element (str "shape-" (:id shape)))]
-                   (let [xml  (-> (js/XMLSerializer.)
-                                  (.serializeToString frame-node)
-                                  js/encodeURIComponent
-                                  js/unescape
-                                  js/btoa)
-                         img-src (str "data:image/svg+xml;base64," xml)]
-                     (obj/set! img-node "src" img-src))
+                #(let [frame-node (dom/get-element (str "shape-" (:id shape)))
+                       loading-node (when frame-node
+                                      (dom/query frame-node "[data-loading=\"true\"]"))]
+                   (if (and (some? frame-node) (not (some? loading-node)))
+                     (let [xml  (-> (js/XMLSerializer.)
+                                    (.serializeToString frame-node)
+                                    js/encodeURIComponent
+                                    js/unescape
+                                    js/btoa)
+                           img-src (str "data:image/svg+xml;base64," xml)]
+                       (obj/set! img-node "src" img-src))
 
-                   (on-frame-not-found (:id shape))))))))
+                     (on-frame-not-found (:id shape)))))))))
 
         on-image-load
         (mf/use-callback
@@ -108,8 +111,9 @@
          (fn [frame-id]
            ;; If we couldn't find the frame maybe is still rendering. We push the event again
            ;; after a time
-           (timers/schedule-on-idle #(dwp/update-frame-thumbnail frame-id))
-           (rx/push! next :next)))]
+           (reset! shape-id nil)
+           (rx/push! next :next)
+           (timers/schedule-on-idle (st/emitf (dwp/update-frame-thumbnail frame-id)))))]
 
     (mf/use-effect
      (mf/deps render-frame)
diff --git a/frontend/src/app/util/timers.cljs b/frontend/src/app/util/timers.cljs
index 4675f0262c..be8cfdbc81 100644
--- a/frontend/src/app/util/timers.cljs
+++ b/frontend/src/app/util/timers.cljs
@@ -34,12 +34,13 @@
       (-dispose [_]
         (js/clearInterval sem)))))
 
-(if (and (exists? js/window) (.-requestIdleCallback js/window))
+(if (and (exists? js/window)
+         (.-requestIdleCallback js/window))
   (do
     (def ^:private request-idle-callback #(js/requestIdleCallback %))
     (def ^:private cancel-idle-callback #(js/cancelIdleCallback %)))
   (do
-    (def ^:private request-idle-callback #(js/setTimeout % 100))
+    (def ^:private request-idle-callback #(js/setTimeout % 250))
     (def ^:private cancel-idle-callback #(js/clearTimeout %))))
 
 (defn schedule-on-idle