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 9d54ea2e4..e248ac130 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -25,6 +25,7 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [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.main.ui.workspace.sidebar.assets.groups :as grp]
@@ -65,6 +66,8 @@
         new-css-system (mf/use-ctx ctx/new-css-system)
         component-id   (:id component)
 
+        visible?       (h/use-visible item-ref :once? true)
+
         ;; NOTE: we don't use reactive deref for it because we don't
         ;; really need rerender on any change on the file change. If
         ;; the component changes, it will trigger rerender anyway.
@@ -180,8 +183,9 @@
        (when (and (some? root-shape)
                   (some? container))
          [:*
-          [:& component-svg {:root-shape root-shape
-                             :objects (:objects container)}]
+          (when visible?
+            [:& component-svg {:root-shape root-shape
+                               :objects (:objects container)}])
           (let [renaming? (= renaming (:id component))]
             [:*
              [:& editable-label