✨ Add more improvements to workspace initialization

frontend/src/app/main/data/workspace.cljs

@@ -391,7 +391,10 @@
             exit? (not= :workspace (dm/get-in state [:route :data :name]))
             state (-> state
                       (update :workspace-cache assoc page-id local)
-                      (dissoc :current-page-id :workspace-local :workspace-trimmed-page :workspace-focus-selected))]
+                      (dissoc :current-page-id
+                              :workspace-local
+                              :workspace-trimmed-page
+                              :workspace-focus-selected))]
 
         (cond-> state
           exit? (dissoc :workspace-drawing))))))
@@ -611,9 +614,7 @@
    (ptk/reify ::end-rename-shape
      ptk/WatchEvent
      (watch [_ state _]
-       (prn "end-rename-shape" name (string? name)  (not (str/blank? name)))
        (when-let [shape-id (dm/get-in state [:workspace-local :shape-for-rename])]
-         (prn "end-rename-shape" shape-id)
          (let [shape (wsh/lookup-shape state shape-id)]
            (rx/concat
             ;; Remove rename state from workspace local state
@@ -2299,7 +2300,6 @@
 (dm/export dwv/update-viewport-size)
 (dm/export dwv/start-panning)
 (dm/export dwv/finish-panning)
-(dm/export dwv/page-loaded)
 
 ;; Undo
 (dm/export dwu/reinitialize-undo)

frontend/src/app/main/data/workspace/viewport.cljs

@@ -20,6 +20,7 @@
 
 (defn initialize-viewport
   [{:keys [width height] :as size}]
+
   (letfn [(update* [{:keys [vport] :as local}]
             (let [wprop (/ (:width vport) width)
                   hprop (/ (:height vport) height)]
@@ -153,11 +154,3 @@
     (update [_ state]
       (-> state
           (update :workspace-local dissoc :panning)))))
-
-
-;; This event does nothing. Is only for subscibe and know when the page has been loaded
-(defn page-loaded [_page-id]
-  (ptk/reify ::page-loaded
-    ptk/UpdateEvent
-    (update [_ state]
-      state)))

frontend/src/app/main/refs.cljs

@@ -104,15 +104,6 @@
 (def workspace-drawing
   (l/derived :workspace-drawing st/state))
 
-(defn make-workspace-ready-ref
-  [file-id]
-  (l/derived (fn [state]
-               (let [data (:workspace-data state)]
-                 (and (:workspace-ready? state)
-                      (= file-id (:current-file-id state))
-                      (= file-id (:id data)))))
-             st/state))
-
 ;; TODO: rename to workspace-selected (?)
 ;; Don't use directly from components, this is a proxy to improve performance of selected-shapes
 (def ^:private selected-shapes-data

frontend/src/app/main/ui/workspace.cljs

@@ -26,9 +26,9 @@
    [app.main.ui.workspace.libraries]
    [app.main.ui.workspace.nudge]
    [app.main.ui.workspace.palette :refer [palette]]
+   [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
    [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
-   [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
    [app.main.ui.workspace.textpalette :refer [textpalette]]
    [app.main.ui.workspace.viewport :refer [viewport]]
    [app.util.dom :as dom]
@@ -40,7 +40,21 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-;; --- Workspace
+(defn- make-file-ready-ref
+  [file-id]
+  (l/derived (fn [state]
+               (let [data (:workspace-data state)]
+                 (and (:workspace-ready? state)
+                      (= file-id (:current-file-id state))
+                      (= file-id (:id data)))))
+             st/state))
+
+(defn- make-page-ready-ref
+  [page-id]
+  (l/derived (fn [state]
+               (and (some? page-id)
+                    (= page-id (:current-page-id state))))
+             st/state))
 
 (mf/defc workspace-content
   {::mf/wrap-props false}
@@ -50,13 +64,13 @@
         {:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
         {:keys [options-mode]} wglobal
 
-        colorpalette? (:colorpalette layout)
+        colorpalette?  (:colorpalette layout)
-        textpalette?  (:textpalette layout)
+        textpalette?   (:textpalette layout)
-        hide-ui?      (:hide-ui layout)
+        hide-ui?       (:hide-ui layout)
         new-css-system (mf/use-ctx ctx/new-css-system)
 
         on-resize
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps vport)
          (fn [resize-type size]
            (when (and vport (not= size vport))
@@ -73,8 +87,9 @@
      (when (and textpalette? (not hide-ui?))
        [:& textpalette])])
 
-     [:section.workspace-content {:key (dm/str "workspace-" page-id)
+     [:section.workspace-content
-                                  :ref node-ref}
+      {:key (dm/str "workspace-" page-id)
+       :ref node-ref}
       [:section.workspace-viewport
        (when (debug? :coordinates)
          [:& coordinates/coordinates {:colorpalette? colorpalette?}])
@@ -83,6 +98,7 @@
          [:div.history-debug-overlay
           [:button {:on-click #(st/emit! dw/reinitialize-undo)} "CLEAR"]
           [:& history-toolbox]])
+
        [:& viewport {:file file
                      :wlocal wlocal
                      :wglobal wglobal
@@ -99,83 +115,83 @@
                            :selected selected
                            :layout layout}]])]))
 
-(def ^:private ref:page-loaded
-  (l/derived
-   (fn [state]
-     (some? (:workspace-trimmed-page state)))
-   st/state))
-
-(mf/defc workspace-page
-  {::mf/wrap-props false}
-  [{:keys [file layout page-id wglobal]}]
-  (let [prev-page-id (hooks/use-previous page-id)
-        page-loaded? (mf/deref ref:page-loaded)]
-
-    (mf/with-effect [page-id prev-page-id]
-      (when (and prev-page-id (not= prev-page-id page-id))
-        (st/emit! (dw/finalize-page prev-page-id)))
-      (if (nil? page-id)
-        (st/emit! (dw/go-to-page))
-        (st/emit! (dw/initialize-page page-id))))
-
-    (when ^boolean page-loaded?
-      [:& workspace-content {:page-id page-id
-                             :file file
-                             :wglobal wglobal
-                             :layout layout}])))
-
 (mf/defc workspace-loader
   []
   [:div.workspace-loader
    i/loader-pencil])
 
-(mf/defc workspace
+(mf/defc workspace-page
   {::mf/wrap-props false}
-  [{:keys [project-id file-id page-id layout-name]}]
+  [{:keys [page-id file layout wglobal]}]
-  (let [file             (mf/deref refs/workspace-file)
+  (let [page-id     (hooks/use-equal-memo page-id)
-        project          (mf/deref refs/workspace-project)
+        page-ready* (mf/with-memo [page-id]
-        layout           (mf/deref refs/workspace-layout)
+                      (make-page-ready-ref page-id))
-        wglobal          (mf/deref refs/workspace-global)
+        page-ready? (mf/deref page-ready*)]
-        read-only?       (mf/deref refs/workspace-read-only?)
-
-        ready-lens       (mf/with-memo [file-id]
-                           (refs/make-workspace-ready-ref file-id))
-        ready?           (mf/deref ready-lens)
-
-        team-id          (:team-id project)
-        file-name        (:name file)
-
-        components-v2    (features/use-feature :components-v2)
-        new-css-system   (features/use-feature :new-css-system)
-
-        background-color (:background-color wglobal)]
 
     (mf/with-effect []
       (let [focus-out #(st/emit! (dw/workspace-focus-lost))
             key       (events/listen globals/document "blur" focus-out)]
         (partial events/unlistenByKey key)))
 
+    (mf/with-effect [page-id]
+      (if (some? page-id)
+        (st/emit! (dw/initialize-page page-id))
+        (st/emit! (dw/go-to-page)))
+      (fn []
+        (when (some? page-id)
+          (st/emit! (dw/finalize-page page-id)))))
+
+    (if ^boolean page-ready?
+      [:& workspace-content {:page-id page-id
+                             :file file
+                             :wglobal wglobal
+                             :layout layout}]
+      [:& workspace-loader])))
+
+(mf/defc workspace
+  {::mf/wrap-props false
+   ::mf/wrap [mf/memo]}
+  [{:keys [project-id file-id page-id layout-name]}]
+
+  (let [layout           (mf/deref refs/workspace-layout)
+        wglobal          (mf/deref refs/workspace-global)
+        read-only?       (mf/deref refs/workspace-read-only?)
+
+        file             (mf/deref refs/workspace-file)
+        project          (mf/deref refs/workspace-project)
+
+        team-id          (:team-id project)
+        file-name        (:name file)
+
+        file-ready*      (mf/with-memo [file-id]
+                           (make-file-ready-ref file-id))
+        file-ready?      (mf/deref file-ready*)
+
+        components-v2?   (features/use-feature :components-v2)
+        new-css?         (features/use-feature :new-css-system)
+
+        background-color (:background-color wglobal)]
+
     ;; Setting the layout preset by its name
     (mf/with-effect [layout-name]
       (st/emit! (dw/initialize-layout layout-name)))
 
+    (mf/with-effect [file-name]
+      (when file-name
+        (dom/set-html-title (tr "title.workspace" file-name))))
+
     (mf/with-effect [project-id file-id]
       (st/emit! (dw/initialize-file project-id file-id))
       (fn []
         (st/emit! ::dwp/force-persist
                   (dw/finalize-file project-id file-id))))
 
-    ;; Set properly the page title
-    (mf/with-effect [file-name]
-      (when file-name
-        (dom/set-html-title (tr "title.workspace" file-name))))
-
     [:& (mf/provider ctx/current-file-id) {:value file-id}
-     [:& (mf/provider ctx/current-team-id) {:value team-id}
+     [:& (mf/provider ctx/current-project-id) {:value project-id}
-      [:& (mf/provider ctx/current-project-id) {:value project-id}
+      [:& (mf/provider ctx/current-team-id) {:value team-id}
        [:& (mf/provider ctx/current-page-id) {:value page-id}
-        [:& (mf/provider ctx/components-v2) {:value components-v2}
+        [:& (mf/provider ctx/components-v2) {:value components-v2?}
-         [:& (mf/provider ctx/new-css-system) {:value new-css-system}
+         [:& (mf/provider ctx/new-css-system) {:value new-css?}
           [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
            [:section#workspace {:style {:background-color background-color
                                         :touch-action "none"}}
@@ -187,7 +203,7 @@
 
             [:& context-menu]
 
-            (if ^boolean ready?
+            (if ^boolean file-ready?
               [:& workspace-page {:page-id page-id
                                   :file file
                                   :wglobal wglobal
@@ -208,6 +224,7 @@
     (mf/use-effect
      (fn []
        #(st/emit! (dw/clear-remove-graphics))))
+
     [:div.modal-overlay
      [:div.modal-container.remove-graphics-dialog
       [:div.modal-header

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -171,7 +171,7 @@
       [:div.section-list
 
        [:div.section-list-item
-        [:div {:data-kaka "1"}
+        [:div
          [:div.item-name (tr "workspace.libraries.file-library")]
          [:div.item-contents (describe-library
                               (count components)

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -25,7 +25,6 @@
    [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
-   [app.util.object :as obj]
    [rumext.v2 :as mf]))
 
 ;; --- Left Sidebar (Component)

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -2435,7 +2435,7 @@
                      :ordering :asc
                      :list-style :thumbs})
         filters    (deref filters*)
-
+        term       (:term filters)
 
         toggle-ordering
         (mf/use-fn #(swap! filters* update :ordering toggle-values [:asc :desc]))
@@ -2488,11 +2488,11 @@
         [:input.search-input
          {:placeholder (tr "workspace.assets.search")
           :type "text"
-          :value (:term filters)
+          :value term
           :on-change on-search-term-change
           :on-key-down handle-key-down}]
 
-        (if ^boolean (str/empty? (:term filters))
+        (if ^boolean (str/empty? term)
           [:div.search-icon
            i/search]
           [:div.search-icon.close

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -258,7 +258,6 @@
     (hooks/setup-viewport-modifiers modifiers base-objects)
     (hooks/setup-shortcuts node-editing? drawing-path? text-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
-    (hooks/setup-page-loaded page-id)
 
     [:div.viewport
      [:div.viewport-overlays

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -28,7 +28,6 @@
    [app.main.worker :as uw]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
-   [app.util.timers :as timers]
    [beicon.core :as rx]
    [debug :refer [debug?]]
    [goog.events :as events]
@@ -55,22 +54,13 @@
              (events/unlistenByKey key))))))))
 
 (defn setup-viewport-size [vport viewport-ref]
-  (mf/use-layout-effect
+  (mf/with-effect [vport]
-   (mf/deps vport)
+    (let [node (mf/ref-val viewport-ref)
-   (fn []
+          prnt (dom/get-parent node)
-     (when-not vport
+          size (dom/get-client-size prnt)]
-       (let [node (mf/ref-val viewport-ref)
-             prnt (dom/get-parent node)]
-         ;; We schedule the event so it fires after `initialize-page` event
-         (timers/schedule #(st/emit! (dw/initialize-viewport (dom/get-client-size prnt)))))))))
 
-
+      (when (not= size vport)
-(defn setup-page-loaded [page-id]
+        (st/emit! (dw/initialize-viewport (dom/get-client-size prnt)))))))
-  (mf/use-effect
-   (mf/deps page-id)
-   (fn []
-     ;; We schedule the event so it fires after `initialize-page` event
-     (timers/schedule #(st/emit! (dw/page-loaded page-id))))))
 
 (defn setup-cursor [cursor alt? mod? space? panning drawing-tool drawing-path? path-editing? z? workspace-read-only?]
   (mf/use-effect