From bb7301fb63e235c0585fac9106a5598183988411 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 26 Mar 2025 13:19:48 +0100 Subject: [PATCH] :sparkles: Improve libraries loading on workspace (#6141) * :sparkles: Improve libraries loading on workspace * :sparkles: Add improvements to CSS --------- Co-authored-by: Eva Marco --- frontend/src/app/main/data/workspace.cljs | 61 +++++--- .../src/app/main/data/workspace/common.cljs | 4 - .../sidebar/assets/file_library.cljs | 148 +++++++++--------- .../sidebar/assets/file_library.scss | 13 +- 4 files changed, 123 insertions(+), 103 deletions(-) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 8af363d3c..9939108aa 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -169,20 +169,12 @@ (let [data (assoc data :pages-index pages-index)] (assoc file :data (d/removem (comp t/pointer? val) data)))))))))) -(defn- libraries-fetched +(defn- check-libraries-synchronozation [file-id libraries] - (ptk/reify ::libraries-fetched - ptk/UpdateEvent - (update [_ state] - (let [libraries (->> libraries - (map (fn [l] (assoc l :library-of file-id))) - (d/index-by :id))] - (update state :files merge libraries))) - + (ptk/reify ::check-libraries-synchronozation ptk/WatchEvent (watch [_ state _] - (let [file (dsh/lookup-file state) - file-id (get file :id) + (let [file (dsh/lookup-file state file-id) ignore-until (get file :ignore-sync-until) needs-check? @@ -195,6 +187,23 @@ (->> (rx/of (dwl/notify-sync-file file-id)) (rx/delay 1000))))))) +(defn- library-resolved + [library] + (ptk/reify ::library-resolved + ptk/UpdateEvent + (update [_ state] + (update state :files assoc (:id library) library)))) + +(defn- libraries-fetched + [file-id libraries] + (ptk/reify ::libraries-fetched + ptk/UpdateEvent + (update [_ state] + (update state :files merge + (->> libraries + (map #(assoc % :library-of file-id)) + (d/index-by :id)))))) + (defn- fetch-libraries [file-id] (ptk/reify ::fetch-libries @@ -204,20 +213,22 @@ (->> (rp/cmd! :get-file-libraries {:file-id file-id}) (rx/mapcat (fn [libraries] - (rx/merge - (->> (rx/from libraries) - (rx/merge-map - (fn [{:keys [id synced-at]}] - (->> (rp/cmd! :get-file {:id id :features features}) - (rx/map #(assoc % :synced-at synced-at))))) - (rx/merge-map resolve-file) - (rx/reduce conj []) - (rx/map (partial libraries-fetched file-id))) - (->> (rx/from libraries) - (rx/map :id) - (rx/mapcat (fn [file-id] - (rp/cmd! :get-file-object-thumbnails {:file-id file-id :tag "component"}))) - (rx/map dwl/library-thumbnails-fetched)))))))))) + (rx/concat + (rx/of (libraries-fetched file-id libraries)) + (rx/merge + (->> (rx/from libraries) + (rx/merge-map + (fn [{:keys [id synced-at]}] + (->> (rp/cmd! :get-file {:id id :features features}) + (rx/map #(assoc % :synced-at synced-at :library-of file-id))))) + (rx/mapcat resolve-file) + (rx/map library-resolved)) + (->> (rx/from libraries) + (rx/map :id) + (rx/mapcat (fn [file-id] + (rp/cmd! :get-file-object-thumbnails {:file-id file-id :tag "component"}))) + (rx/map dwl/library-thumbnails-fetched))) + (rx/of (check-libraries-synchronozation file-id libraries)))))))))) (defn- workspace-initialized [file-id] diff --git a/frontend/src/app/main/data/workspace/common.cljs b/frontend/src/app/main/data/workspace/common.cljs index 8a4cf0d98..5fb49925b 100644 --- a/frontend/src/app/main/data/workspace/common.cljs +++ b/frontend/src/app/main/data/workspace/common.cljs @@ -40,10 +40,6 @@ (when (not (:workspace-visited props)) (rx/of (du/update-profile-props {:workspace-visited true}))))))) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; UNDO -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Toolbar ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index e8f3bc58b..76352b18d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs @@ -145,7 +145,7 @@ (mf/defc file-library-content* {::mf/private true} - [{:keys [file is-local open-status-ref on-clear-selection filters colors media typographies components]}] + [{:keys [file is-local is-loaded open-status-ref on-clear-selection filters colors media typographies components]}] (let [open-status (mf/deref open-status-ref) file-id (:id file) @@ -246,79 +246,82 @@ (st/emit! (dwu/commit-undo-transaction undo-id)))))] [:div {:class (stl/css :library-content)} - (when ^boolean show-components? - [:& components-section - {:file-id file-id - :is-local is-local - :components components - :listing-thumbs? listing-thumbs? - :open? (or ^boolean force-open-components? - ^boolean (get open-status :components false)) - :force-open? force-open-components? - :open-status-ref open-status-ref - :reverse-sort? reverse-sort? - :selected selected - :on-asset-click on-component-click - :on-assets-delete on-assets-delete - :on-clear-selection on-clear-selection}]) + (if-not is-loaded + [:span {:class (stl/css :loading)} (tr "labels.loading")] + [:* + (when ^boolean show-components? + [:& components-section + {:file-id file-id + :is-local is-local + :components components + :listing-thumbs? listing-thumbs? + :open? (or ^boolean force-open-components? + ^boolean (get open-status :components false)) + :force-open? force-open-components? + :open-status-ref open-status-ref + :reverse-sort? reverse-sort? + :selected selected + :on-asset-click on-component-click + :on-assets-delete on-assets-delete + :on-clear-selection on-clear-selection}]) - (when ^boolean show-graphics? - [:& graphics-section - {:file-id file-id - :project-id project-id - :local? is-local - :objects media - :listing-thumbs? listing-thumbs? - :open? (or ^boolean force-open-graphics? - ^boolean (get open-status :graphics false)) - :force-open? force-open-graphics? - :open-status-ref open-status-ref - :reverse-sort? reverse-sort? - :selected selected - :on-asset-click on-graphics-click - :on-assets-delete on-assets-delete - :on-clear-selection on-clear-selection}]) + (when ^boolean show-graphics? + [:& graphics-section + {:file-id file-id + :project-id project-id + :local? is-local + :objects media + :listing-thumbs? listing-thumbs? + :open? (or ^boolean force-open-graphics? + ^boolean (get open-status :graphics false)) + :force-open? force-open-graphics? + :open-status-ref open-status-ref + :reverse-sort? reverse-sort? + :selected selected + :on-asset-click on-graphics-click + :on-assets-delete on-assets-delete + :on-clear-selection on-clear-selection}]) - (when ^boolean show-colors? - [:& colors-section - {:file-id file-id - :local? is-local - :colors colors - :open? (or ^boolean force-open-colors? - ^boolean (get open-status :colors false)) - :force-open? force-open-colors? - :open-status-ref open-status-ref - :reverse-sort? reverse-sort? - :selected selected - :on-asset-click on-colors-click - :on-assets-delete on-assets-delete - :on-clear-selection on-clear-selection}]) + (when ^boolean show-colors? + [:& colors-section + {:file-id file-id + :local? is-local + :colors colors + :open? (or ^boolean force-open-colors? + ^boolean (get open-status :colors false)) + :force-open? force-open-colors? + :open-status-ref open-status-ref + :reverse-sort? reverse-sort? + :selected selected + :on-asset-click on-colors-click + :on-assets-delete on-assets-delete + :on-clear-selection on-clear-selection}]) - (when ^boolean show-typography? - [:& typographies-section - {:file file - :file-id (:id file) - :local? is-local - :typographies typographies - :open? (or ^boolean force-open-typographies? - ^boolean (get open-status :typographies false)) - :force-open? force-open-typographies? - :open-status-ref open-status-ref - :reverse-sort? reverse-sort? - :selected selected - :on-asset-click on-typography-click - :on-assets-delete on-assets-delete - :on-clear-selection on-clear-selection}]) + (when ^boolean show-typography? + [:& typographies-section + {:file file + :file-id (:id file) + :local? is-local + :typographies typographies + :open? (or ^boolean force-open-typographies? + ^boolean (get open-status :typographies false)) + :force-open? force-open-typographies? + :open-status-ref open-status-ref + :reverse-sort? reverse-sort? + :selected selected + :on-asset-click on-typography-click + :on-assets-delete on-assets-delete + :on-clear-selection on-clear-selection}]) - (when (and (not ^boolean show-components?) - (not ^boolean show-graphics?) - (not ^boolean show-colors?) - (not ^boolean show-typography?)) - [:div {:class (stl/css :asset-title)} - [:span {:class (stl/css :no-found-icon)} - i/search] - [:span {:class (stl/css :no-found-text)} - (tr "workspace.assets.not-found")]])])) + (when (and (not ^boolean show-components?) + (not ^boolean show-graphics?) + (not ^boolean show-colors?) + (not ^boolean show-typography?)) + [:div {:class (stl/css :asset-title)} + [:span {:class (stl/css :no-found-icon)} + i/search] + [:span {:class (stl/css :no-found-text)} + (tr "workspace.assets.not-found")]])])])) (mf/defc file-library* [{:keys [file is-local is-default-open filters]}] @@ -333,9 +336,7 @@ typographies (:typographies library) filters-term (:term filters) - - ;; FIXME: maybe unused - ;; has-term? (not (str/blank? filters-term)) + is-loaded (some? library) filtered-colors (mf/with-memo [filters colors] @@ -401,6 +402,7 @@ [:> file-library-content* {:file file :is-local is-local + :is-loaded is-loaded :filters filters :colors filtered-colors :components filtered-components diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index b05e5796e..8e9fbd523 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -4,6 +4,7 @@ // // Copyright (c) KALEIDOS INC +@use "../../../ds/typography.scss" as t; @import "refactor/common-refactor.scss"; .tool-window { padding: 0 0 $s-24 $s-12; @@ -14,7 +15,7 @@ } .file-name { - @include bodySmallTypography; + @include t.use-typography("body-small"); display: flex; justify-content: flex-start; align-items: center; @@ -22,6 +23,16 @@ height: 100%; } +.loading { + @include t.use-typography("body-small"); + display: flex; + align-items: center; + justify-content: flex-start; + height: $s-32; + padding-left: calc($s-12 + $s-2); + color: var(--color-foreground-secondary); +} + .special-title { @include textEllipsis; color: var(--title-foreground-color-hover);