✨ Improve libraries loading on workspace (#6141)

* ✨ Improve libraries loading on workspace

* ✨ Add improvements to CSS

---------

Co-authored-by: Eva Marco <evamarcod@gmail.com>

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]

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
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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

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);