✨ Use thumbnails instead of svgs for the list of components on swap

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -2669,7 +2669,7 @@
     align-items: center;
     margin-bottom: 0.5rem;
     cursor: pointer;
-    svg {
+    svg, img {
       background-color: $color-canvas;
       border-radius: $br4;
       border: 2px solid transparent;

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

@@ -13,7 +13,10 @@
    [app.common.spec :as us]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
+   [app.main.data.workspace.thumbnails :as dwt]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.refs :as refs]
+   [app.main.render :refer [component-svg]]
    [app.main.store :as st]
    [app.main.ui.components.context-menu :refer [context-menu]]
    [app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
@@ -257,3 +260,32 @@
          (rename
           (:id target-asset)
           (cph/merge-path-item prefix (:name target-asset))))))))
+
+
+(defn- get-component-thumbnail-uri
+  "Returns the component thumbnail uri"
+  [file-id component]
+  (let [page-id   (:main-instance-page component)
+        root-id   (:main-instance-id component)
+        object-id (dwt/fmt-object-id file-id page-id root-id)]
+    (if (= file-id (:id @refs/workspace-file))
+      (mf/deref (refs/workspace-thumbnail-by-id object-id))
+      (let [thumbnails (dm/get-in @refs/workspace-libraries [file-id :thumbnails (dm/str object-id)])]
+        thumbnails))))
+
+(mf/defc component-item-thumbnail
+  "Component that renders the thumbnail image or the original SVG."
+  {::mf/wrap-props false}
+  [{:keys [file-id root-shape component container]}]
+  (let [retry (mf/use-state 0)
+        thumbnail-uri (get-component-thumbnail-uri file-id component)]
+    (if (some? thumbnail-uri)
+      [:img {:src thumbnail-uri
+             :on-error (fn []
+                         (when (@retry < 3)
+                           (inc retry)))
+             :loading "lazy"
+             :decoding "async"
+             :class (dom/classnames (css :thumbnail) true)}]
+      [:& component-svg {:root-shape root-shape
+                         :objects (:objects container)}])))

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

@@ -17,10 +17,8 @@
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.media :as dwm]
-   [app.main.data.workspace.thumbnails :as dwt]
    [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
-   [app.main.render :refer [component-svg]]
    [app.main.store :as st]
    [app.main.ui.components.editable-label :refer [editable-label]]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
@@ -54,23 +52,6 @@
                       component)]
       [root-shape container])))
 
-(defn- get-component-thumbnail-uri
-  "Returns the component thumbnail uri"
-  [file-id component]
-  (let [page-id   (:main-instance-page component)
-        root-id   (:main-instance-id component)
-        object-id (dwt/fmt-object-id file-id page-id root-id)]
-    (if (= file-id (:id @refs/workspace-file))
-      (mf/deref (refs/workspace-thumbnail-by-id object-id))
-      (let [thumbnails (dm/get-in @refs/workspace-libraries [file-id :thumbnails (dm/str object-id)])]
-        thumbnails))))
-
-(mf/defc component-item-thumbnail
-  "Component that renders the thumbnail image or the original SVG."
-  {::mf/wrap-props false}
-  [{: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.
@@ -79,16 +60,6 @@
         (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 []
-                         (when (@retry < 3)
-                           (inc retry)))
-             :loading "lazy"
-             :decoding "async"
-             :class (dom/classnames (css :thumbnail) true)}]
-      [:& component-svg {:root-shape root-shape
-                         :objects (:objects container)}])))
 
 (mf/defc components-item
   {::mf/wrap-props false}
@@ -183,7 +154,7 @@
        (when (and (some? root-shape)
                   (some? container))
          [:*
-          [:& component-item-thumbnail {:file-id file-id
+          [:& cmm/component-item-thumbnail {:file-id file-id
                                         :root-shape root-shape
                                         :component component
                                         :container container}]
@@ -225,7 +196,7 @@
                   (some? container))
          [:*
           (when visible?
-            [:& component-item-thumbnail {:file-id file-id
+            [:& cmm/component-item-thumbnail {:file-id file-id
                                           :root-shape root-shape
                                           :component component
                                           :container container}])

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -24,6 +24,7 @@
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
+   [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -280,8 +281,10 @@
                   :on-click #(when-not loop?
                                (st/emit!
                                 (dwl/component-swap shape (:file-id filters) (:id item))))}
-                 [:& component-svg {:root-shape root-shape
+                 [:& cmm/component-item-thumbnail {:file-id (:file-id item)
-                                    :objects (:objects container)}]
+                                                   :root-shape root-shape
+                                                   :component item
+                                                   :container container}]
                  [:span.component-name
                   {:class (stl/css-case :selected (= (:id item) (:component-id shape)))}
                   (:name item)]])