🎉 Make the graphics assets thumbnail load lazy

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

@@ -31,6 +31,7 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.context :as ctx]
+   [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
    [app.util.color :as uc]
@@ -270,7 +271,8 @@
 
 ;; ---- Common blocks ----
 
-(def auto-pos-menu-state {:open? false
+(def auto-pos-menu-state
+  {:open? false
    :top nil
    :left nil})
 
@@ -731,7 +733,7 @@
            on-asset-click on-context-menu on-drag-start do-rename cancel-rename
            selected-graphics-full selected-graphics-paths]}]
   (let [item-ref  (mf/use-ref)
-
+        visible?  (h/use-visible item-ref :once? true)
         dragging? (mf/use-state false)
 
         on-drop
@@ -774,7 +776,10 @@
            :on-drag-leave on-drag-leave
            :on-drag-over on-drag-over
            :on-drop on-drop}
-     [:img {:src (cfg/resolve-file-media object true)
+
+     (when visible?
+       [:*
+        [:img {:src (when visible? (cf/resolve-file-media object true))
                :draggable false}] ;; Also need to add css pointer-events: none
 
         (let [renaming? (= renaming (:id object))]
@@ -795,7 +800,7 @@
              :on-change do-rename
              :on-cancel cancel-rename}]
            (when @dragging?
-          [:div.dragging])])]))
+             [:div.dragging])])])]))
 
 (mf/defc graphics-group
   [{:keys [file-id prefix groups open-groups renaming listing-thumbs? selected-objects on-asset-click