3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-05 22:01:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Make the graphics assets thumbnail load lazy

Browse source
This commit is contained in:
Andrey Antukh 2022-09-29 15:06:18 +02:00
parent 7dcd362abd
commit 0fc2442175
1 changed files with 30 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
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,9 +271,10 @@
;; ---- Common blocks ---- ;; ---- Common blocks ----
(def auto-pos-menu-state {:open? false (def auto-pos-menu-state
:top nil {:open? false
:left nil}) :top nil
:left nil})
(defn- open-auto-pos-menu (defn- open-auto-pos-menu
[state event] [state event]
@ -730,8 +732,8 @@
[{:keys [object renaming listing-thumbs? selected-objects [{:keys [object renaming listing-thumbs? selected-objects
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,28 +776,31 @@
: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)
:draggable false}] ;; Also need to add css pointer-events: none
(let [renaming? (= renaming (:id object))] (when visible?
[:* [:*
[:& editable-label [:img {:src (when visible? (cf/resolve-file-media object true))
{:class-name (dom/classnames :draggable false}] ;; Also need to add css pointer-events: none
:cell-name @listing-thumbs?
:item-name (not @listing-thumbs?) (let [renaming? (= renaming (:id object))]
:editing renaming?) [:*
:value (cph/merge-path-item (:path object) (:name object)) [:& editable-label
:tooltip (cph/merge-path-item (:path object) (:name object)) {:class-name (dom/classnames
:display-value (if @listing-thumbs? :cell-name @listing-thumbs?
(:name object) :item-name (not @listing-thumbs?)
(cph/compact-name (:path object) :editing renaming?)
(:name object))) :value (cph/merge-path-item (:path object) (:name object))
:editing? renaming? :tooltip (cph/merge-path-item (:path object) (:name object))
:disable-dbl-click? true :display-value (if @listing-thumbs?
:on-change do-rename (:name object)
:on-cancel cancel-rename}] (cph/compact-name (:path object)
(when @dragging? (:name object)))
[:div.dragging])])])) :editing? renaming?
:disable-dbl-click? true
:on-change do-rename
:on-cancel cancel-rename}]
(when @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