🎉 Make the graphics assets thumbnail load lazy

This commit is contained in:
Andrey Antukh 2022-09-29 15:06:18 +02:00
parent 7dcd362abd
commit 0fc2442175

View file

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