From 02399add7a49b24aec28bb7d09c8d7371577ef76 Mon Sep 17 00:00:00 2001
From: Pablo Alba <pablo.alba@kaleidos.net>
Date: Tue, 24 Oct 2023 13:52:44 +0200
Subject: [PATCH] :sparkles: On swap components do not render miniatures for
 components outside the screen

---
 .../sidebar/options/menus/component.cljs      | 53 +++++++++++++------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index b115022870..2424b99620 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -21,6 +21,7 @@
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.util.dom :as dom]
@@ -144,6 +145,31 @@
         (when (or @editing? creating?)
           [:div.counter (str @size "/300")])]])))
 
+
+(mf/defc component-swap-item
+  {::mf/wrap-props false}
+  [{:keys [item loop? shapes file-id root-shape container component-id] :as props}]
+  (let [on-select-component
+        (mf/use-fn
+         #(when-not loop?
+            (st/emit! (dwl/component-multi-swap shapes file-id (:id item)))))
+        item-ref       (mf/use-ref)
+        visible?       (h/use-visible item-ref :once? true)]
+    [:div.component-item
+     {:ref item-ref
+      :class (stl/css-case :disabled loop?)
+      :key (:id item)
+      :on-click on-select-component}
+     (when visible?
+       [:& cmm/component-item-thumbnail {:file-id (:file-id item)
+                                         :root-shape root-shape
+                                         :component item
+                                         :container container}])
+     [:span.component-name
+      {:class (stl/css-case :selected (= (:id item) component-id))}
+      (:name item)]]))
+
+
 (mf/defc component-swap
   [{:keys [shapes] :as props}]
   (let [single?             (= 1 (count shapes))
@@ -313,22 +339,17 @@
                     root-shape (ctf/get-component-root data item)
                     loop?      (or (contains? parent-components (:main-instance-id item))
                                    (contains? parent-components (:id item)))]
-                [:div.component-item
-                 {:class (stl/css-case :disabled loop?)
-                  :key (:id item)
-                  :on-click #(when-not loop?
-                               (st/emit!
-                                (dwl/component-multi-swap shapes (:file-id filters) (:id item))))}
-                 [:& cmm/component-item-thumbnail {:file-id (:file-id item)
-                                                   :root-shape root-shape
-                                                   :component item
-                                                   :container container}]
-                 [:span.component-name
-                  {:class (stl/css-case :selected (= (:id item) current-comp-id))}
-                  (:name item)]])
-              [:div.component-group {:key (uuid/next) :on-click #(on-enter-group item)}
-               [:span (cph/last-path item)]
-               [:span i/arrow-slide]]))]]]))
+                [:& component-swap-item {:item item
+                                         :loop? loop?
+                                         :shapes shapes
+                                         :file-id (:file-id filters)
+                                         :root-shape root-shape
+                                         :container container
+                                         :component-id current-comp-id}])
+              (let [on-group-click #(on-enter-group item)]
+                [:div.component-group {:key (uuid/next) :on-click on-group-click}
+                 [:span (cph/last-path item)]
+                 [:span i/arrow-slide]])))]]]))
 
 (mf/defc component-ctx-menu
   [{:keys [menu-entries on-close show type] :as props}]