From 0fc24421755b96cf7fa4b3993a0d0b7b62080821 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 29 Sep 2022 15:06:18 +0200 Subject: [PATCH 1/2] :tada: Make the graphics assets thumbnail load lazy --- .../app/main/ui/workspace/sidebar/assets.cljs | 55 ++++++++++--------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index c0f1f9b5b..f7fd1c570 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/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,9 +271,10 @@ ;; ---- Common blocks ---- -(def auto-pos-menu-state {:open? false - :top nil - :left nil}) +(def auto-pos-menu-state + {:open? false + :top nil + :left nil}) (defn- open-auto-pos-menu [state event] @@ -730,8 +732,8 @@ [{:keys [object renaming listing-thumbs? selected-objects 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) - + (let [item-ref (mf/use-ref) + visible? (h/use-visible item-ref :once? true) dragging? (mf/use-state false) on-drop @@ -774,28 +776,31 @@ :on-drag-leave on-drag-leave :on-drag-over on-drag-over :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 - {:class-name (dom/classnames - :cell-name @listing-thumbs? - :item-name (not @listing-thumbs?) - :editing renaming?) - :value (cph/merge-path-item (:path object) (:name object)) - :tooltip (cph/merge-path-item (:path object) (:name object)) - :display-value (if @listing-thumbs? - (:name object) - (cph/compact-name (:path object) - (:name object))) - :editing? renaming? - :disable-dbl-click? true - :on-change do-rename - :on-cancel cancel-rename}] - (when @dragging? - [:div.dragging])])])) + [: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))] + [:* + [:& editable-label + {:class-name (dom/classnames + :cell-name @listing-thumbs? + :item-name (not @listing-thumbs?) + :editing renaming?) + :value (cph/merge-path-item (:path object) (:name object)) + :tooltip (cph/merge-path-item (:path object) (:name object)) + :display-value (if @listing-thumbs? + (:name object) + (cph/compact-name (:path object) + (:name object))) + :editing? renaming? + :disable-dbl-click? true + :on-change do-rename + :on-cancel cancel-rename}] + (when @dragging? + [:div.dragging])])])])) (mf/defc graphics-group [{:keys [file-id prefix groups open-groups renaming listing-thumbs? selected-objects on-asset-click From fcbb95e8b68a9b2b620304fb637b10597da283f6 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 29 Sep 2022 15:07:07 +0200 Subject: [PATCH 2/2] :lipstick: Replace some use-callback with shorter use-fn on sidebar/assets --- CHANGES.md | 1 + .../app/main/ui/workspace/sidebar/assets.cljs | 204 +++++++++--------- 2 files changed, 103 insertions(+), 102 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 077c99deb..573e6bc89 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -25,6 +25,7 @@ - Newsletter Opt-in options for subscription categories [Taiga #3242](https://tree.taiga.io/project/penpot/us/3242) - Print emails to console by default if smtp is disabled - Add `email-verification` flag for enable/disable email verification +- Make graphics thumbnails load lazy [Taiga #4252](https://tree.taiga.io/project/penpot/issue/4252) ### :bug: Bugs fixed diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index f7fd1c570..f1b909d7f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -12,7 +12,7 @@ [app.common.pages.helpers :as cph] [app.common.spec :as us] [app.common.text :as txt] - [app.config :as cfg] + [app.config :as cf] [app.main.data.events :as ev] [app.main.data.modal :as modal] [app.main.data.workspace :as dw] @@ -136,7 +136,7 @@ on-close #(modal/hide!) on-accept - (mf/use-callback + (mf/use-fn (mf/deps form) (fn [_] (let [asset-name (get-in @form [:clean-data :asset-name])] @@ -248,8 +248,6 @@ (when (> num-selected 1) (set-drag-image event item-ref num-selected)))) - - (defn- on-drag-enter-asset-group [event dragging? prefix selected-assets-paths] (dom/stop-propagation event) @@ -328,7 +326,7 @@ menu-state (mf/use-state auto-pos-menu-state) on-fold-group - (mf/use-callback + (mf/use-fn (mf/deps file-id box path group-open?) (fn [event] (dom/stop-propagation event) @@ -337,12 +335,12 @@ path (not group-open?))))) on-context-menu - (mf/use-callback + (mf/use-fn (fn [event] (swap! menu-state #(open-auto-pos-menu % event)))) on-close-menu - (mf/use-callback + (mf/use-fn (fn [] (swap! menu-state close-auto-pos-menu)))] @@ -373,12 +371,12 @@ dragging? (mf/use-state false) unselect-all - (mf/use-callback + (mf/use-fn (fn [] (st/emit! (dw/unselect-all-assets)))) on-component-click - (mf/use-callback + (mf/use-fn (mf/deps component selected-components) (fn [event] (dom/stop-propagation event) @@ -391,29 +389,29 @@ (on-asset-click event (:id component) unselect-all))))) on-drop - (mf/use-callback + (mf/use-fn (mf/deps component dragging? selected-components selected-components-full selected-components-paths) (fn [event] (on-drop-asset event component dragging? selected-components selected-components-full selected-components-paths dwl/rename-component))) on-drag-over - (mf/use-callback #(dom/prevent-default %)) + (mf/use-fn #(dom/prevent-default %)) on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps component dragging? selected-components selected-components-paths) (fn [event] (on-drag-enter-asset event component dragging? selected-components selected-components-paths))) on-drag-leave - (mf/use-callback + (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) on-component-drag-start - (mf/use-callback + (mf/use-fn (mf/deps component selected-components item-ref on-drag-start) (fn [event] (on-asset-drag-start event component selected-components item-ref :components on-drag-start)))] @@ -468,21 +466,21 @@ (map #(if (nil? %) "" %))) on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-components-paths) (fn [event] (on-drag-enter-asset-group event dragging? prefix selected-components-paths))) on-drag-leave - (mf/use-callback + (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) - on-drag-over (mf/use-callback #(dom/prevent-default %)) + on-drag-over (mf/use-fn #(dom/prevent-default %)) on-drop - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-components-paths selected-components-full) (fn [event] (on-drop-asset-group event dragging? prefix selected-components-paths selected-components-full dwl/rename-component)))] @@ -569,7 +567,7 @@ groups (group-assets components reverse-sort?) on-duplicate - (mf/use-callback + (mf/use-fn (mf/deps @state) (fn [] (if (empty? selected-components) @@ -580,7 +578,7 @@ (st/emit! (dwu/commit-undo-transaction)))))) on-delete - (mf/use-callback + (mf/use-fn (mf/deps @state file-id multi-components? multi-assets?) (fn [] (if (or multi-components? multi-assets?) @@ -591,25 +589,25 @@ (dwu/commit-undo-transaction))))) on-rename - (mf/use-callback + (mf/use-fn (mf/deps @state) (fn [] (swap! state assoc :renaming (:component-id @state)))) do-rename - (mf/use-callback + (mf/use-fn (mf/deps @state) (fn [new-name] (st/emit! (dwl/rename-component (:renaming @state) new-name)) (swap! state assoc :renaming nil))) cancel-rename - (mf/use-callback + (mf/use-fn (fn [] (swap! state assoc :renaming nil))) on-context-menu - (mf/use-callback + (mf/use-fn (mf/deps selected-components on-clear-selection) (fn [component-id] (fn [event] @@ -620,12 +618,12 @@ (swap! menu-state #(open-auto-pos-menu % event)))))) on-close-menu - (mf/use-callback + (mf/use-fn (fn [] (swap! menu-state close-auto-pos-menu))) create-group - (mf/use-callback + (mf/use-fn (mf/deps components selected-components on-clear-selection) (fn [group-name] (on-clear-selection) @@ -641,7 +639,7 @@ (st/emit! (dwu/commit-undo-transaction)))) rename-group - (mf/use-callback + (mf/use-fn (mf/deps components) (fn [path last-path] (on-clear-selection) @@ -655,14 +653,14 @@ (st/emit! (dwu/commit-undo-transaction)))) on-group - (mf/use-callback + (mf/use-fn (mf/deps components selected-components) (fn [event] (dom/stop-propagation event) (modal/show! :name-group-dialog {:accept create-group}))) on-rename-group - (mf/use-callback + (mf/use-fn (mf/deps components) (fn [event path last-path] (dom/stop-propagation event) @@ -671,7 +669,7 @@ :accept rename-group}))) on-ungroup - (mf/use-callback + (mf/use-fn (mf/deps components) (fn [path] (on-clear-selection) @@ -685,7 +683,7 @@ (st/emit! (dwu/commit-undo-transaction)))) on-drag-start - (mf/use-callback + (mf/use-fn (fn [component event] (dnd/set-data! event "penpot/component" {:file-id file-id :component component}) @@ -737,31 +735,33 @@ dragging? (mf/use-state false) on-drop - (mf/use-callback + (mf/use-fn (mf/deps object dragging? selected-objects selected-graphics-full selected-graphics-paths) (fn [event] (on-drop-asset event object dragging? selected-objects selected-graphics-full selected-graphics-paths dwl/rename-media))) - on-drag-over (mf/use-callback #(dom/prevent-default %)) + on-drag-over (mf/use-fn #(dom/prevent-default %)) on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps object dragging? selected-objects selected-graphics-paths) (fn [event] (on-drag-enter-asset event object dragging? selected-objects selected-graphics-paths))) on-drag-leave - (mf/use-callback + (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) on-grahic-drag-start - (mf/use-callback + (mf/use-fn (mf/deps object selected-objects item-ref on-drag-start) (fn [event] - (on-asset-drag-start event object selected-objects item-ref :graphics on-drag-start)))] + (on-asset-drag-start event object selected-objects item-ref :graphics on-drag-start))) + + ] [:div {:ref item-ref :class-name (dom/classnames @@ -816,21 +816,21 @@ on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-graphics-paths) (fn [event] (on-drag-enter-asset-group event dragging? prefix selected-graphics-paths))) on-drag-leave - (mf/use-callback + (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) - on-drag-over (mf/use-callback #(dom/prevent-default %)) + on-drag-over (mf/use-fn #(dom/prevent-default %)) on-drop - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-graphics-paths selected-graphics-full) (fn [event] (on-drop-asset-group event dragging? prefix selected-graphics-paths selected-graphics-full dwl/rename-media)))] @@ -920,13 +920,13 @@ groups (group-assets objects reverse-sort?) add-graphic - (mf/use-callback + (mf/use-fn (fn [] #(st/emit! (dwl/set-assets-box-open file-id :graphics true)) (dom/click (mf/ref-val input-ref)))) on-file-selected - (mf/use-callback + (mf/use-fn (mf/deps file-id) (fn [blobs] (let [params {:file-id file-id @@ -936,7 +936,7 @@ :asset-type "graphics"}))))) on-delete - (mf/use-callback + (mf/use-fn (mf/deps @state multi-objects? multi-assets?) (fn [] (if (or multi-objects? multi-assets?) @@ -944,25 +944,25 @@ (st/emit! (dwl/delete-media {:id (:object-id @state)}))))) on-rename - (mf/use-callback + (mf/use-fn (mf/deps @state) (fn [] (swap! state assoc :renaming (:object-id @state)))) cancel-rename - (mf/use-callback + (mf/use-fn (fn [] (swap! state assoc :renaming nil))) do-rename - (mf/use-callback + (mf/use-fn (mf/deps @state) (fn [new-name] (st/emit! (dwl/rename-media (:renaming @state) new-name)) (swap! state assoc :renaming nil))) on-context-menu - (mf/use-callback + (mf/use-fn (mf/deps selected-objects on-clear-selection) (fn [object-id] (fn [event] @@ -973,12 +973,12 @@ (swap! menu-state #(open-auto-pos-menu % event)))))) on-close-menu - (mf/use-callback + (mf/use-fn (fn [] (swap! menu-state close-auto-pos-menu))) create-group - (mf/use-callback + (mf/use-fn (mf/deps objects selected-objects on-clear-selection) (fn [group-name] (on-clear-selection) @@ -994,7 +994,7 @@ (st/emit! (dwu/commit-undo-transaction)))) rename-group - (mf/use-callback + (mf/use-fn (mf/deps objects) (fn [path last-path] (on-clear-selection) @@ -1008,14 +1008,14 @@ (st/emit! (dwu/commit-undo-transaction)))) on-group - (mf/use-callback + (mf/use-fn (mf/deps objects selected-objects) (fn [event] (dom/stop-propagation event) (modal/show! :name-group-dialog {:accept create-group}))) on-rename-group - (mf/use-callback + (mf/use-fn (mf/deps objects) (fn [event path last-path] (dom/stop-propagation event) @@ -1023,7 +1023,7 @@ :last-path last-path :accept rename-group}))) on-ungroup - (mf/use-callback + (mf/use-fn (mf/deps objects) (fn [path] (on-clear-selection) @@ -1037,7 +1037,7 @@ (st/emit! (dwu/commit-undo-transaction)))) on-drag-start - (mf/use-callback + (mf/use-fn (fn [{:keys [name id mtype]} event] (dnd/set-data! event "text/asset-id" (str id)) (dnd/set-data! event "text/asset-name" name) @@ -1136,7 +1136,7 @@ (st/emit! (dwl/update-color updated-color file-id)))) delete-color - (mf/use-callback + (mf/use-fn (mf/deps @state multi-colors? multi-assets? file-id) (fn [] (if (or multi-colors? multi-assets?) @@ -1178,7 +1178,7 @@ :position :right})) on-context-menu - (mf/use-callback + (mf/use-fn (mf/deps color selected-colors on-clear-selection) (fn [event] (when local? @@ -1187,32 +1187,32 @@ (swap! menu-state #(open-auto-pos-menu % event))))) on-close-menu - (mf/use-callback + (mf/use-fn (fn [] (swap! menu-state close-auto-pos-menu))) on-drop - (mf/use-callback + (mf/use-fn (mf/deps color dragging? selected-colors selected-colors-full selected-colors-paths move-color) (fn [event] (on-drop-asset event color dragging? selected-colors selected-colors-full selected-colors-paths move-color))) - on-drag-over (mf/use-callback #(dom/prevent-default %)) + on-drag-over (mf/use-fn #(dom/prevent-default %)) on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps color dragging? selected-colors selected-colors-paths) (fn [event] (on-drag-enter-asset event color dragging? selected-colors selected-colors-paths))) on-drag-leave - (mf/use-callback + (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) on-color-drag-start - (mf/use-callback + (mf/use-fn (mf/deps color selected-colors item-ref) (fn [event] (on-asset-drag-start event color selected-colors item-ref :colors identity)))] @@ -1282,20 +1282,20 @@ move-color (partial dwl/rename-color file-id) on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-colors-paths) (fn [event] (on-drag-enter-asset-group event dragging? prefix selected-colors-paths))) - on-drag-leave (mf/use-callback + on-drag-leave (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) - on-drag-over (mf/use-callback #(dom/prevent-default %)) + on-drag-over (mf/use-fn #(dom/prevent-default %)) on-drop - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-colors-paths selected-colors-full move-color) (fn [event] (on-drop-asset-group event dragging? prefix selected-colors-paths selected-colors-full move-color)))] @@ -1376,13 +1376,13 @@ groups (group-assets colors reverse-sort?) add-color - (mf/use-callback + (mf/use-fn (mf/deps file-id) (fn [value _opacity] (st/emit! (dwl/add-color value)))) add-color-clicked - (mf/use-callback + (mf/use-fn (mf/deps file-id) (fn [event] (st/emit! (dwl/set-assets-box-open file-id :colors true) @@ -1397,7 +1397,7 @@ :position :right}))) create-group - (mf/use-callback + (mf/use-fn (mf/deps colors selected-colors on-clear-selection file-id) (fn [color-id] (fn [group-name] @@ -1415,7 +1415,7 @@ (st/emit! (dwu/commit-undo-transaction))))) rename-group - (mf/use-callback + (mf/use-fn (mf/deps colors) (fn [path last-path] (on-clear-selection) @@ -1430,7 +1430,7 @@ (st/emit! (dwu/commit-undo-transaction)))) on-group - (mf/use-callback + (mf/use-fn (mf/deps colors selected-colors) (fn [color-id] (fn [event] @@ -1438,7 +1438,7 @@ (modal/show! :name-group-dialog {:accept (create-group color-id)})))) on-rename-group - (mf/use-callback + (mf/use-fn (mf/deps colors) (fn [event path last-path] (dom/stop-propagation event) @@ -1446,7 +1446,7 @@ :last-path last-path :accept rename-group}))) on-ungroup - (mf/use-callback + (mf/use-fn (mf/deps colors) (fn [path] (on-clear-selection) @@ -1497,28 +1497,28 @@ (let [item-ref (mf/use-ref) dragging? (mf/use-state false) on-drop - (mf/use-callback + (mf/use-fn (mf/deps typography dragging? selected-typographies selected-typographies-full selected-typographies-paths move-typography) (fn [event] (on-drop-asset event typography dragging? selected-typographies selected-typographies-full selected-typographies-paths move-typography))) - on-drag-over (mf/use-callback #(dom/prevent-default %)) + on-drag-over (mf/use-fn #(dom/prevent-default %)) on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps typography dragging? selected-typographies selected-typographies-paths) (fn [event] (on-drag-enter-asset event typography dragging? selected-typographies selected-typographies-paths))) on-drag-leave - (mf/use-callback + (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) on-typography-drag-start - (mf/use-callback + (mf/use-fn (mf/deps typography selected-typographies item-ref) (fn [event] (on-asset-drag-start event typography selected-typographies item-ref :typographies identity)))] @@ -1559,21 +1559,21 @@ move-typography (partial dwl/rename-typography file-id) on-drag-enter - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-typographies-paths) (fn [event] (on-drag-enter-asset-group event dragging? prefix selected-typographies-paths))) on-drag-leave - (mf/use-callback + (mf/use-fn (mf/deps dragging?) (fn [event] (on-drag-leave-asset event dragging?))) - on-drag-over (mf/use-callback #(dom/prevent-default %)) + on-drag-over (mf/use-fn #(dom/prevent-default %)) on-drop - (mf/use-callback + (mf/use-fn (mf/deps dragging? prefix selected-typographies-paths selected-typographies-full move-typography) (fn [event] (on-drop-asset-group event dragging? prefix selected-typographies-paths selected-typographies-full move-typography)))] @@ -1658,7 +1658,7 @@ (seq (:colors selected-assets))) add-typography - (mf/use-callback + (mf/use-fn (mf/deps file-id) (fn [_] (st/emit! (dwl/add-typography txt/default-typography) @@ -1666,7 +1666,7 @@ :asset-type "typography"})))) handle-change - (mf/use-callback + (mf/use-fn (mf/deps file-id) (fn [typography changes] (st/emit! (dwl/update-typography (merge typography changes) file-id)))) @@ -1686,7 +1686,7 @@ ids))) create-group - (mf/use-callback + (mf/use-fn (mf/deps typographies selected-typographies on-clear-selection file-id) (fn [group-name] (on-clear-selection) @@ -1703,7 +1703,7 @@ (st/emit! (dwu/commit-undo-transaction)))) rename-group - (mf/use-callback + (mf/use-fn (mf/deps typographies) (fn [path last-path] (on-clear-selection) @@ -1718,14 +1718,14 @@ (st/emit! (dwu/commit-undo-transaction)))) on-group - (mf/use-callback + (mf/use-fn (mf/deps typographies selected-typographies) (fn [event] (dom/stop-propagation event) (modal/show! :name-group-dialog {:accept create-group}))) on-rename-group - (mf/use-callback + (mf/use-fn (mf/deps typographies) (fn [event path last-path] (dom/stop-propagation event) @@ -1733,7 +1733,7 @@ :last-path last-path :accept rename-group}))) on-ungroup - (mf/use-callback + (mf/use-fn (mf/deps typographies) (fn [path] (on-clear-selection) @@ -1748,7 +1748,7 @@ (st/emit! (dwu/commit-undo-transaction)))) on-context-menu - (mf/use-callback + (mf/use-fn (mf/deps selected-typographies on-clear-selection) (fn [id event] (when local? @@ -1758,7 +1758,7 @@ (swap! menu-state #(open-auto-pos-menu % event))))) on-close-menu - (mf/use-callback + (mf/use-fn (fn [] (swap! menu-state close-auto-pos-menu))) @@ -1771,7 +1771,7 @@ (st/emit! #(assoc-in % [:workspace-global :edit-typography] (:id @state)))) handle-delete-typography - (mf/use-callback + (mf/use-fn (mf/deps @state multi-typographies? multi-assets?) (fn [] (if (or multi-typographies? multi-assets?) @@ -1941,17 +1941,17 @@ components (apply-filters (mf/deref components-ref) filters @reverse-sort?) toggle-sort - (mf/use-callback + (mf/use-fn (fn [_] (swap! reverse-sort? not))) toggle-listing - (mf/use-callback + (mf/use-fn (fn [_] (swap! listing-thumbs? not))) extend-selected-assets - (mf/use-callback + (mf/use-fn (mf/deps selected-assets) (fn [asset-type asset-groups asset-id] (letfn [(flatten-groups @@ -1982,12 +1982,12 @@ (st/emit! (dw/select-assets values asset-type)))))))) unselect-all - (mf/use-callback + (mf/use-fn (fn [] (st/emit! (dw/unselect-all-assets)))) on-asset-click - (mf/use-callback + (mf/use-fn (mf/deps selected-assets) (fn [asset-type asset-groups event asset-id default-click] (cond @@ -2006,7 +2006,7 @@ (default-click event))))) on-assets-delete - (mf/use-callback + (mf/use-fn (mf/deps selected-assets) (fn [] (st/emit! (dwu/start-undo-transaction)) @@ -2141,20 +2141,20 @@ filters (mf/use-state {:term "" :box :all}) on-search-term-change - (mf/use-callback + (mf/use-fn (mf/deps team-id) (fn [event] (let [value (dom/get-target-val event)] (swap! filters assoc :term value)))) on-search-clear-click - (mf/use-callback + (mf/use-fn (mf/deps team-id) (fn [_] (swap! filters assoc :term ""))) on-box-filter-change - (mf/use-callback + (mf/use-fn (mf/deps team-id) (fn [event] (let [value (-> (dom/get-target event)