From f10792619df6304897bf787978e051191b167c7f Mon Sep 17 00:00:00 2001
From: AzazelN28 <asakon28@gmail.com>
Date: Fri, 22 Nov 2024 13:10:05 +0100
Subject: [PATCH] :bug: Fix component list jumps

---
 frontend/src/app/main/render.cljs                 | 15 ++++++++-------
 .../main/ui/workspace/sidebar/assets/common.cljs  |  8 +++++---
 .../ui/workspace/sidebar/assets/components.cljs   | 14 +++++++-------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs
index d58ce0fe9..6ee64dc01 100644
--- a/frontend/src/app/main/render.cljs
+++ b/frontend/src/app/main/render.cljs
@@ -338,7 +338,7 @@
 ;; used to render thumbnails on assets panel.
 (mf/defc component-svg
   {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
-  [{:keys [objects root-shape show-grids? zoom class] :or {zoom 1} :as props}]
+  [{:keys [objects root-shape show-grids? is-hidden zoom class] :or {zoom 1} :as props}]
   (when root-shape
     (let [root-shape-id (:id root-shape)
           include-metadata (mf/use-ctx export/include-metadata-ctx)
@@ -381,13 +381,14 @@
              :xmlns:penpot (when include-metadata "https://penpot.app/xmlns")
              :fill "none"}
 
-       [:*
-        [:> shape-container {:shape root-shape'}
-         [:& (mf/provider muc/is-component?) {:value true}
-          [:& root-shape-wrapper {:shape root-shape' :view-box vbox}]]]
+       (when-not is-hidden
+         [:*
+          [:> shape-container {:shape root-shape'}
+           [:& (mf/provider muc/is-component?) {:value true}
+            [:& root-shape-wrapper {:shape root-shape' :view-box vbox}]]]
 
-        (when show-grids?
-          [:& empty-grids {:root-shape-id root-shape-id :objects objects}])]])))
+          (when show-grids?
+            [:& empty-grids {:root-shape-id root-shape-id :objects objects}])])])))
 
 (mf/defc component-svg-thumbnail
   {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
index b8bf2959f..e64313bbf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
@@ -270,7 +270,7 @@
 (mf/defc component-item-thumbnail
   "Component that renders the thumbnail image or the original SVG."
   {::mf/props :obj}
-  [{:keys [file-id root-shape component container class]}]
+  [{:keys [file-id root-shape component container class is-hidden]}]
   (let [page-id (:main-instance-page component)
         root-id (:main-instance-id component)
         retry   (mf/use-state 0)
@@ -290,7 +290,8 @@
            (when (< @retry 3)
              (inc retry))))]
 
-    (if (and (some? thumbnail-uri) (contains? cf/flags :component-thumbnails))
+    (if (and (some? thumbnail-uri)
+             (contains? cf/flags :component-thumbnails))
       [:& component-svg-thumbnail
        {:thumbnail-uri thumbnail-uri
         :class class
@@ -303,7 +304,8 @@
        {:root-shape root-shape
         :class class
         :objects (:objects container)
-        :show-grids? true}])))
+        :show-grids? true
+        :is-hidden is-hidden}])))
 
 (defn generate-components-menu-entries
   [shapes components-v2]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
index 8efffa844..77974c20a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -171,13 +171,13 @@
          (when ^boolean dragging?
            [:div {:class (stl/css :dragging)}])]
 
-        (when visible?
-          [:& cmm/component-item-thumbnail {:file-id file-id
-                                            :class (stl/css-case :thumbnail true
-                                                                 :asset-list-thumbnail (not listing-thumbs?))
-                                            :root-shape root-shape
-                                            :component component
-                                            :container container}])])]))
+        [:& cmm/component-item-thumbnail {:file-id file-id
+                                          :class (stl/css-case :thumbnail true
+                                                               :asset-list-thumbnail (not listing-thumbs?))
+                                          :root-shape root-shape
+                                          :component component
+                                          :container container
+                                          :is-hidden (not visible?)}]])]))
 
 (mf/defc components-group
   {::mf/wrap-props false}