⚡ Add imposter placeholders

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

@@ -123,9 +123,12 @@
 
             tries-ref      (mf/use-ref 0)
             imposter-ref   (mf/use-ref nil)
+            imposter-loaded-ref (mf/use-ref false)
             task-ref       (mf/use-ref nil)
 
-            on-load        (mf/use-fn #(mf/set-ref-val! tries-ref 0))
+            on-load        (mf/use-fn (fn []
+                                        (mf/set-ref-val! tries-ref 0)
+                                        (mf/set-ref-val! imposter-loaded-ref true)))
             on-error       (mf/use-fn
                             (fn []
                               (let [current-tries (mf/ref-val tries-ref)
@@ -159,6 +162,15 @@
            :key "frame-container"
            :opacity (when ^boolean hidden? 0)}
 
+           ;; When there is no thumbnail, we generate a empty rect.
+          (when (and (not ^boolean thumbnail-uri) (not (mf/ref-val imposter-loaded-ref)))
+            [:g.frame-placeholder
+             [:rect {:x x
+                     :y y
+                     :width width
+                     :height height
+                     :fill "url(#frame-placeholder-gradient)"}]])
+
           [:g.frame-imposter
            [:image.thumbnail-bitmap
             {:x x
@@ -182,8 +194,7 @@
                      :stroke-width 2}])]
 
           ;; When thumbnail is disabled.
-          (when (or (not ^boolean thumbnail?)
-                    (not ^boolean thumbnail-uri))
+          (when (or (not ^boolean thumbnail?) (not ^boolean thumbnail-uri))
             [:g.frame-content
              {:id (dm/str "frame-content-" frame-id)
               :ref container-ref}

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -316,6 +316,19 @@
                :pointer-events "none"}
        :fill "none"}
 
+      [:defs
+       [:linearGradient {:id "frame-placeholder-gradient"}
+        [:animateTransform
+         {:attributeName "gradientTransform"
+          :type "translate"
+          :from "-1 0"
+          :to "1 0"
+          :dur "2s"
+          :repeatCount "indefinite"}]
+        [:stop {:offset "0%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]
+        [:stop {:offset "50%" :stop-color (str "color-mix(in srgb-linear, " background " 80%, #777)") :stop-opacity 1}]
+        [:stop {:offset "100%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]]]
+
       (when (dbg/enabled? :show-export-metadata)
         [:& use/export-page {:options options}])
 
@@ -329,9 +342,9 @@
       [:& (mf/provider ctx/current-vbox) {:value vbox'}
        [:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)}
          ;; Render root shape
-         [:& shapes/root-shape {:key page-id
-                                :objects base-objects
-                                :active-frames @active-frames}]]]]
+        [:& shapes/root-shape {:key page-id
+                               :objects base-objects
+                               :active-frames @active-frames}]]]]
 
      [:svg.viewport-controls
       {:xmlns "http://www.w3.org/2000/svg"