🎉 Add lazy-loading for penpot top-level page components

frontend/deps.edn

@@ -19,10 +19,9 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.7"
+  {:git/tag "v2.8"
-   :git/sha "37fa860"
+   :git/sha "f8a0d9a"
-   :git/url "https://github.com/funcool/rumext.git"
+   :git/url "https://github.com/funcool/rumext.git"}
-  }
 
   instaparse/instaparse {:mvn/version "1.4.12"}
   garden/garden {:git/url "https://github.com/noprompt/garden"

frontend/shadow-cljs.edn

@@ -12,15 +12,47 @@
               :watch-dir "resources/public"
               :reload-strategy :full}
    :build-options {:manifest-name "manifest.json"}
-
+   :module-loader true
    :modules
-   {:shared {:entries []}
+   {:shared
+    {:entries []}
 
     :main
     {:entries [app.main]
      :depends-on #{:shared}
      :init-fn app.main/init}
 
+    :util-highlight
+    {:entries [app.util.code-highlight]
+     :depends-on #{:main}}
+
+    :main-auth
+    {:entries [app.main.ui.auth
+               app.main.ui.auth.verify-token]
+     :depends-on #{:main}}
+
+    :main-viewer
+    {:entries [app.main.ui.viewer]
+     :depends-on #{:main :main-auth}}
+
+    :main-onboarding
+    {:entries [app.main.ui.onboarding
+               app.main.ui.onboarding.questions
+               app.main.ui.releases]
+     :depends-on #{:main}}
+
+    :main-workspace
+    {:entries [app.main.ui.workspace]
+     :depends-on #{:main}}
+
+    :main-dashboard
+    {:entries [app.main.ui.dashboard]
+     :depends-on #{:main}}
+
+    :main-settings
+    {:entries [app.main.ui.settings]
+     :depends-on #{:main}}
+
     :render
     {:entries [app.render]
      :depends-on #{:shared}

frontend/src/app/main/ui.cljs

@@ -10,26 +10,45 @@
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.auth :refer [auth]]
-   [app.main.ui.auth.verify-token :refer [verify-token]]
    [app.main.ui.context :as ctx]
    [app.main.ui.cursors :as c]
-   [app.main.ui.dashboard :refer [dashboard]]
    [app.main.ui.debug.components-preview :as cm]
    [app.main.ui.frame-preview :as frame-preview]
    [app.main.ui.icons :as i]
    [app.main.ui.messages :as msgs]
-   [app.main.ui.onboarding]
-   [app.main.ui.onboarding.questions]
-   [app.main.ui.releases]
-   [app.main.ui.settings :as settings]
    [app.main.ui.static :as static]
-   [app.main.ui.viewer :as viewer]
-   [app.main.ui.workspace :as workspace]
    [app.util.dom :as dom]
+   [app.util.i18n :refer [tr]]
    [app.util.router :as rt]
    [rumext.v2 :as mf]))
 
+(def auth-page
+  (mf/lazy-component app.main.ui.auth/auth))
+
+(def verify-token-page
+  (mf/lazy-component app.main.ui.auth.verify-token/verify-token))
+
+(def viewer-page
+  (mf/lazy-component app.main.ui.viewer/viewer))
+
+(def dashboard-page
+  (mf/lazy-component app.main.ui.dashboard/dashboard))
+
+(def settings-page
+  (mf/lazy-component app.main.ui.settings/settings))
+
+(def workspace-page
+  (mf/lazy-component app.main.ui.workspace/workspace))
+
+(def questions-modal
+  (mf/lazy-component app.main.ui.onboarding.questions/questions))
+
+(def onboarding-modal
+  (mf/lazy-component app.main.ui.onboarding/onboarding-modal))
+
+(def release-modal
+  (mf/lazy-component app.main.ui.releases/release-notes-modal))
+
 (mf/defc on-main-error
   [{:keys [error] :as props}]
   (mf/with-effect
@@ -50,17 +69,17 @@
         :auth-register-success
         :auth-recovery-request
         :auth-recovery)
-       [:& auth {:route route}]
+       [:? [:& auth-page {:route route}]]
 
        :auth-verify-token
-       [:& verify-token {:route route}]
+       [:? [:& verify-token-page {:route route}]]
 
        (:settings-profile
         :settings-password
         :settings-options
         :settings-feedback
         :settings-access-tokens)
-       [:& settings/settings {:route route}]
+       [:? [:& settings-page {:route route}]]
 
        :debug-icons-preview
        (when *assert*
@@ -70,11 +89,6 @@
           [:h1 "Icons"]
           [:& i/debug-icons-preview]])
 
-       :debug-components-preview
-       [:div.debug-preview
-        [:h1 "Components preview"]
-        [:& cm/components-preview]]
-
        (:dashboard-search
         :dashboard-projects
         :dashboard-files
@@ -85,8 +99,7 @@
         :dashboard-team-invitations
         :dashboard-team-webhooks
         :dashboard-team-settings)
-
+       [:?
-       [:*
         #_[:& app.main.ui.releases/release-notes-modal {:version "1.19"}]
         #_[:& app.main.ui.onboarding/onboarding-templates-modal]
         #_[:& app.main.ui.onboarding/onboarding-modal]
@@ -96,53 +109,68 @@
             (and (contains? cf/flags :onboarding-questions)
                  (not (:onboarding-questions-answered props false))
                  (not (:onboarding-viewed props false)))
-            [:& app.main.ui.onboarding.questions/questions]
+            [:& questions-modal]
 
             (and (not (:onboarding-viewed props))
                  (contains? cf/flags :onboarding))
-            [:& app.main.ui.onboarding/onboarding-modal {}]
+            [:& onboarding-modal {}]
 
             (and (contains? cf/flags :onboarding)
                  (:onboarding-viewed props)
                  (not= (:release-notes-viewed props) (:main cf/version))
                  (not= "0.0" (:main cf/version)))
-            [:& app.main.ui.releases/release-notes-modal {:version (:main cf/version)}]))
+            [:& release-modal {:version (:main cf/version)}]))
 
         (when profile
-          [:& dashboard {:route route :profile profile}])]
+          [:& dashboard-page {:route route :profile profile}])]
 
        :viewer
        (let [{:keys [query-params path-params]} route
              {:keys [index share-id section page-id interactions-mode frame-id]
               :or {section :interactions interactions-mode :show-on-click}} query-params
              {:keys [file-id]} path-params]
-         (if (:token query-params)
+         [:? {}
-           [:& viewer/breaking-change-notice]
+          (if (:token query-params)
-           [:& viewer/viewer-page {:page-id page-id
+            [:> static/static-header {}
-                                   :file-id file-id
+             [:div.image i/unchain]
-                                   :section section
+             [:div.main-message (tr "viewer.breaking-change.message")]
-                                   :index index
+             [:div.desc-message (tr "viewer.breaking-change.description")]]
-                                   :share-id share-id
+
-                                   :interactions-mode (keyword interactions-mode)
+
-                                   :interactions-show? (case (keyword interactions-mode)
+            [:& viewer-page
-                                                         :hide false
+             {:page-id page-id
-                                                         :show true
+              :file-id file-id
-                                                         :show-on-click false)
+              :section section
-                                   :frame-id frame-id}]))
+              :index index
+              :share-id share-id
+              :interactions-mode (keyword interactions-mode)
+              :interactions-show? (case (keyword interactions-mode)
+                                    :hide false
+                                    :show true
+                                    :show-on-click false)
+              :frame-id frame-id}])])
 
        :workspace
        (let [project-id (some-> params :path :project-id uuid)
              file-id    (some-> params :path :file-id uuid)
              page-id    (some-> params :query :page-id uuid)
              layout     (some-> params :query :layout keyword)]
-         [:& workspace/workspace {:project-id project-id
+         [:? {}
-                                  :file-id file-id
+          [:& workspace-page {:project-id project-id
-                                  :page-id page-id
+                              :file-id file-id
-                                  :layout-name layout
+                              :page-id page-id
-                                  :key file-id}])
+                              :layout-name layout
+                              :key file-id}]])
+
+
+       :debug-components-preview
+       [:div.debug-preview
+        [:h1 "Components preview"]
+        [:& cm/components-preview]]
 
        :frame-preview
        [:& frame-preview/frame-preview]
+
        nil)]]))
 
 (mf/defc app

frontend/src/app/main/ui/debug/components_preview.cljs

@@ -6,17 +6,18 @@
 
 (ns app.main.ui.debug.components-preview
   (:require-macros [app.main.style :as stl])
-  (:require [app.common.data :as d]
+  (:require
-            [app.main.data.users :as du]
+   [app.common.data :as d]
-            [app.main.refs :as refs]
+   [app.main.data.users :as du]
-            [app.main.store :as st]
+   [app.main.refs :as refs]
-            [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
+   [app.main.store :as st]
-            [app.main.ui.components.search-bar :refer [search-bar]]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-            [app.main.ui.components.tab-container :refer [tab-container tab-element]]
+   [app.main.ui.components.search-bar :refer [search-bar]]
-            [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
-            [app.main.ui.icons :as i]
+   [app.main.ui.components.title-bar :refer [title-bar]]
-            [app.util.dom :as dom]
+   [app.main.ui.icons :as i]
-            [rumext.v2 :as mf]))
+   [app.util.dom :as dom]
+   [rumext.v2 :as mf]))
 
 (mf/defc component-wrapper
   {::mf/wrap-props false}

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

@@ -38,6 +38,7 @@
    [app.util.globals :as globals]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
+   [app.util.object :as obj]
    [app.util.webapi :as wapi]
    [cuerdas.core :as str]
    [goog.events :as events]
@@ -334,11 +335,10 @@
                               :page page
                               :zoom zoom}])]])))
 
-(mf/defc viewer
+(mf/defc viewer-content
-  [{:keys [params data]}]
+  {::mf/wrap-props false}
-
+  [{:keys [data page-id share-id section index interactions-mode] :as props}]
-  (let [{:keys [page-id share-id section index interactions-mode]} params
+  (let [{:keys [file users project permissions]} data
-        {:keys [file users project permissions]} data
 
         new-css-system (mf/use-ctx ctx/new-css-system)
 
@@ -747,26 +747,23 @@
                 :section section
                 :index index}]]))]]])))
 
-;; --- Component: Viewer Page
+;; --- Component: Viewer
 
-(mf/defc viewer-page
+(mf/defc viewer
-  [{:keys [file-id] :as props}]
+  {::mf/wrap-props false}
-
+  [{:keys [file-id share-id page-id] :as props}]
-  (mf/with-effect [file-id]
+  (mf/with-effect [file-id page-id share-id]
-    (st/emit! (dv/initialize props))
+    (let [params {:file-id file-id
-    (fn []
+                  :page-id page-id
-      (st/emit! (dv/finalize props))))
+                  :share-id share-id}]
+      (st/emit! (dv/initialize params))
+      (fn []
+        (st/emit! (dv/finalize params)))))
 
   (if-let [data (mf/deref refs/viewer-data)]
-    (let [key (str (get-in data [:file :id]))]
+    (let [props (obj/merge props #js {:data data :key (dm/str file-id)})]
-      [:& viewer {:params props :data data :key key}])
+      [:> viewer-content props])
 
     [:div.loader-content.viewer-loader
      i/loader-pencil]))
 
-(mf/defc breaking-change-notice
-  []
-  [:> static/static-header {}
-   [:div.image i/unchain]
-   [:div.main-message (tr "viewer.breaking-change.message")]
-   [:div.desc-message (tr "viewer.breaking-change.description")]])