Lazy load block container

deps/db/src/logseq/db/sqlite/common_db.cljs

@@ -71,11 +71,8 @@
   "Returns initial data"
   [db]
   (let [files (get-built-in-files db)
-        journals (get-latest-journals db 3)
-        journal-blocks (mapcat (fn [journal]
-                                 (let [blocks (:block/_page (d/entity db (:db/id journal)))]
-                                   (map (fn [b] (d/pull db '[*] (:db/id b))) blocks))) journals)]
-    (concat files journals journal-blocks)))
+        journals (get-latest-journals db 3)]
+    (concat files journals)))
 
 (defn restore-initial-data
   "Given initial sqlite data and schema, returns a datascript connection"

src/main/frontend/components/block.cljs

@@ -84,7 +84,8 @@
             [rum.core :as rum]
             [shadow.loader :as loader]
             [logseq.common.path :as path]
-            [electron.ipc :as ipc]))
+            [electron.ipc :as ipc]
+            [frontend.db.async :as db-async]))
 
 ;; local state
 (defonce *dragging?
@@ -3090,7 +3091,11 @@
   (rum/local false ::show-block-right-menu?)
   {:init (fn [state]
            (let [[config block] (:rum/args state)
-                 block-id (:block/uuid block)]
+                 block-id (:block/uuid block)
+                 *loading? (atom true)]
+             (if (:block/content (db/entity [:block/uuid block-id]))
+               (reset! *loading? false)
+               (db-async/<get-block-and-children (state/get-current-repo) block-id *loading? :children? false))
              (cond
                (root-block? config block)
                (state/set-collapsed-block! block-id false)
@@ -3102,6 +3107,7 @@
                :else
                nil)
              (assoc state
+                    ::loading? *loading?
                     ::control-show? (atom false)
                     ::navigating-block (atom (:block/uuid block)))))
    :will-unmount (fn [state]
@@ -3113,31 +3119,30 @@
                    state)}
   [state config block]
   (let [repo (state/get-current-repo)
-        unloaded? (state/sub-block-unloaded? repo (str (:block/uuid block)))
         *navigating-block (get state ::navigating-block)
         navigating-block (rum/react *navigating-block)
         navigated? (and (not= (:block/uuid block) navigating-block) navigating-block)
-        [original-block block] (build-block config block {:navigating-block navigating-block :navigated? navigated?})
-        config' (if original-block
-                  (assoc config :original-block original-block)
-                  config)
-        opts {}]
+        loading? (rum/react (::loading? state))]
     (cond
-      unloaded?
+      loading?
       [:div.ls-block.flex-1.flex-col.rounded-sm {:style {:width "100%"}}
        [:div.flex.flex-row
         [:div.flex.flex-row.items-center.mr-2.ml-1 {:style {:height 24}}
          [:span.bullet-container.cursor
           [:span.bullet]]]
         [:div.flex.flex-1
-         [:span.opacity-70
-          "Loading..."]]]]
+         ""]]]
 
       :else
-      (rum/with-key
-        (block-container-inner state repo config' block
-                               (merge opts {:navigating-block navigating-block :navigated? navigated?}))
-        (str "block-inner" (:block/uuid block))))))
+      (let [[original-block block] (build-block config block {:navigating-block navigating-block :navigated? navigated?})
+            config' (if original-block
+                      (assoc config :original-block original-block)
+                      config)
+            opts {}]
+        (rum/with-key
+          (block-container-inner state repo config' block
+                                 (merge opts {:navigating-block navigating-block :navigated? navigated?}))
+          (str "block-inner" (:block/uuid block)))))))
 
 (defn divide-lists
   [[f & l]]

src/main/frontend/components/page.cljs

@@ -23,7 +23,6 @@
             [frontend.db.model :as model]
             [frontend.extensions.graph :as graph]
             [frontend.extensions.pdf.utils :as pdf-utils]
-            [frontend.format.block :as block]
             [frontend.format.mldoc :as mldoc]
             [frontend.handler.common :as common-handler]
             [frontend.handler.config :as config-handler]
@@ -167,19 +166,15 @@
                                   (date/journal-title->int (date/today))))
                      (state/pub-event! [:journal/insert-template page-name])))
                  state)}
-  [state repo page-e {:keys [sidebar? whiteboard?] :as config}]
+  [state _repo page-e {:keys [sidebar? whiteboard?] :as config}]
   (when page-e
     (let [page-name (or (:block/name page-e)
                         (str (:block/uuid page-e)))
           block-id (parse-uuid page-name)
           block? (boolean block-id)
           block (get-block page-name)
-          block-unloaded? (state/sub-block-unloaded? repo (:block/uuid block))
           children (:block/_parent block)]
       (cond
-        block-unloaded?
-        (ui/loading "Loading...")
-
         (and
          (not block?)
          (empty? children))
@@ -465,127 +460,126 @@
   (rum/local false ::hover-title?)
   {:init (fn [state]
            (let [page-name (:page-name (first (:rum/args state)))
-                 page-name' (get-sanity-page-name state page-name)]
-             (db-async/<get-block-and-children (state/get-current-repo) page-name')
-             (assoc state ::page-name page-name')))}
+                 page-name' (get-sanity-page-name state page-name)
+                 entity (get-page-entity page-name')
+                 *loading? (atom true)]
+             (if (and entity (seq (:block/_left entity))) ; block and its children has been loaded
+               (reset! *loading? false)
+               (db-async/<get-block-and-children (state/get-current-repo) page-name' *loading?))
+             (assoc state
+                    ::page-name page-name'
+                    ::loading? *loading?)))}
   [state {:keys [repo page-name preview? sidebar?] :as option}]
-  (when-let [path-page-name (get-path-page-name state page-name)]
-    (let [current-repo (state/sub :git/current-repo)
-          repo (or repo current-repo)
-          page-name (util/page-name-sanity-lc path-page-name)
-          page (get-page-entity page-name)
-          block-id (:block/uuid page)
-          block? (some? (:block/page page))
-          journal? (db/journal-page? page-name)
-          db-based? (config/db-based-graph? repo)
-          fmt-journal? (boolean (date/journal-title->int page-name))
-          whiteboard? (:whiteboard? option) ;; in a whiteboard portal shape?
-          whiteboard-page? (model/whiteboard-page? page-name) ;; is this page a whiteboard?
-          route-page-name path-page-name
-          page-name (:block/name page)
-          page-original-name (:block/original-name page)
-          title (or page-original-name page-name)
-          today? (and
-                  journal?
-                  (= page-name (util/page-name-sanity-lc (date/journal-name))))
-          *control-show? (::control-show? state)
-          *all-collapsed? (::all-collapsed? state)
-          *current-block-page (::current-page state)
-          block-or-whiteboard? (or block? whiteboard?)
-          home? (= :home (state/get-current-route))]
-      (when (or page-name block-or-whiteboard?)
-        [:div.flex-1.page.relative
-         (merge (if (seq (:block/tags page))
-                  (let [page-names (model/get-page-names-by-ids (map :db/id (:block/tags page)))]
-                    {:data-page-tags (text-util/build-data-value page-names)})
-                  {})
-
-                {:key path-page-name
-                 :class (util/classnames [{:is-journals (or journal? fmt-journal?)}])})
-
-         (if (and whiteboard-page? (not sidebar?))
-           [:div ((state/get-component :whiteboard/tldraw-preview) page-name)] ;; FIXME: this is not reactive
-           [:div.relative
-            (when (and (not sidebar?) (not block?))
-              [:div.flex.flex-row.space-between
-               (when (or (mobile-util/native-platform?) (util/mobile?))
-                 [:div.flex.flex-row.pr-2
-                  {:style {:margin-left -15}
-                   :on-mouse-over (fn [e]
-                                    (page-mouse-over e *control-show? *all-collapsed?))
-                   :on-mouse-leave (fn [e]
-                                     (page-mouse-leave e *control-show?))}
-                  (page-blocks-collapse-control title *control-show? *all-collapsed?)])
-               (let [original-name (:block/original-name (db/entity [:block/name (util/page-name-sanity-lc page-name)]))]
-                 (when (and (not whiteboard?) original-name)
-                   (page-title page-name {:journal? journal?
-                                          :fmt-journal? fmt-journal?
-                                          :preview? preview?
-                                          :*hover? (::hover-title? state)})))
-               (when (not config/publishing?)
-                 (when config/lsp-enabled?
-                   [:div.flex.flex-row
-                    (plugins/hook-ui-slot :page-head-actions-slotted nil)
-                    (plugins/hook-ui-items :pagebar)]))])
-
-            (when (and db-based? (not block?))
-              [:div.pb-4
-               (db-page/page-info page (::hover-title? state))])
-
-            [:div
-             (when (and block? (not sidebar?) (not whiteboard?))
-               (let [config {:id "block-parent"
-                             :block? true}]
-                 [:div.mb-4
-                  (component-block/breadcrumb config repo block-id {:level-limit 3})]))
-
-             (when (and db-based? (not block?) (not preview?))
-               (db-page/page-properties-react page {:configure? false}))
+  (when-not (rum/react (::loading? state))
+    (when-let [path-page-name (get-path-page-name state page-name)]
+      (let [current-repo (state/sub :git/current-repo)
+            repo (or repo current-repo)
+            page-name (util/page-name-sanity-lc path-page-name)
+            page (get-page-entity page-name)
+            block-id (:block/uuid page)
+            block? (some? (:block/page page))
+            journal? (db/journal-page? page-name)
+            db-based? (config/db-based-graph? repo)
+            fmt-journal? (boolean (date/journal-title->int page-name))
+            whiteboard? (:whiteboard? option) ;; in a whiteboard portal shape?
+            whiteboard-page? (model/whiteboard-page? page-name) ;; is this page a whiteboard?
+            route-page-name path-page-name
+            page-name (:block/name page)
+            page-original-name (:block/original-name page)
+            title (or page-original-name page-name)
+            today? (and
+                    journal?
+                    (= page-name (util/page-name-sanity-lc (date/journal-name))))
+            *control-show? (::control-show? state)
+            *all-collapsed? (::all-collapsed? state)
+            *current-block-page (::current-page state)
+            block-or-whiteboard? (or block? whiteboard?)
+            home? (= :home (state/get-current-route))]
+        (when (or page-name block-or-whiteboard?)
+          [:div.flex-1.page.relative
+           (merge (if (seq (:block/tags page))
+                    (let [page-names (model/get-page-names-by-ids (map :db/id (:block/tags page)))]
+                      {:data-page-tags (text-util/build-data-value page-names)})
+                    {})
+
+                  {:key path-page-name
+                   :class (util/classnames [{:is-journals (or journal? fmt-journal?)}])})
+
+           (if (and whiteboard-page? (not sidebar?))
+             [:div ((state/get-component :whiteboard/tldraw-preview) page-name)] ;; FIXME: this is not reactive
+             [:div.relative
+              (when (and (not sidebar?) (not block?))
+                [:div.flex.flex-row.space-between
+                 (when (or (mobile-util/native-platform?) (util/mobile?))
+                   [:div.flex.flex-row.pr-2
+                    {:style {:margin-left -15}
+                     :on-mouse-over (fn [e]
+                                      (page-mouse-over e *control-show? *all-collapsed?))
+                     :on-mouse-leave (fn [e]
+                                       (page-mouse-leave e *control-show?))}
+                    (page-blocks-collapse-control title *control-show? *all-collapsed?)])
+                 (let [original-name (:block/original-name (db/entity [:block/name (util/page-name-sanity-lc page-name)]))]
+                   (when (and (not whiteboard?) original-name)
+                     (page-title page-name {:journal? journal?
+                                            :fmt-journal? fmt-journal?
+                                            :preview? preview?
+                                            :*hover? (::hover-title? state)})))
+                 (when (not config/publishing?)
+                   (when config/lsp-enabled?
+                     [:div.flex.flex-row
+                      (plugins/hook-ui-slot :page-head-actions-slotted nil)
+                      (plugins/hook-ui-items :pagebar)]))])
+
+              (when (and db-based? (not block?))
+                [:div.pb-4
+                 (db-page/page-info page (::hover-title? state))])
+
+              [:div
+               (when (and block? (not sidebar?) (not whiteboard?))
+                 (let [config {:id "block-parent"
+                               :block? true}]
+                   [:div.mb-4
+                    (component-block/breadcrumb config repo block-id {:level-limit 3})]))
+
+               (when (and db-based? (not block?) (not preview?))
+                 (db-page/page-properties-react page {:configure? false}))
 
            ;; blocks
-             (let [_ (and block? page (reset! *current-block-page (:block/name (:block/page page))))
-                   _ (when (and block? (not page))
-                       (route-handler/redirect-to-page! @*current-block-page))]
-               (page-blocks-cp repo page {:sidebar? sidebar? :whiteboard? whiteboard?}))]])
+               (let [_ (and block? page (reset! *current-block-page (:block/name (:block/page page))))
+                     _ (when (and block? (not page))
+                         (route-handler/redirect-to-page! @*current-block-page))]
+                 (page-blocks-cp repo page {:sidebar? sidebar? :whiteboard? whiteboard?}))]])
 
-         (when today?
-           (today-queries repo today? sidebar?))
+           (when today?
+             (today-queries repo today? sidebar?))
 
-         (when today?
-           (scheduled/scheduled-and-deadlines page-name))
+           (when today?
+             (scheduled/scheduled-and-deadlines page-name))
 
-         (when-not block?
-           (tagged-pages repo page-name page-original-name))
+           (when-not block?
+             (tagged-pages repo page-name page-original-name))
 
        ;; referenced blocks
-         (when-not block-or-whiteboard?
-           [:div {:key "page-references"}
-            (rum/with-key
-              (reference/references route-page-name)
-              (str route-page-name "-refs"))])
+           (when-not block-or-whiteboard?
+             [:div {:key "page-references"}
+              (rum/with-key
+                (reference/references route-page-name)
+                (str route-page-name "-refs"))])
 
-         (when-not block-or-whiteboard?
-           (when (not journal?)
-             (hierarchy/structures route-page-name)))
+           (when-not block-or-whiteboard?
+             (when (not journal?)
+               (hierarchy/structures route-page-name)))
 
-         (when-not (or block-or-whiteboard? sidebar? home?)
-           [:div {:key "page-unlinked-references"}
-            (reference/unlinked-references route-page-name)])]))))
+           (when-not (or block-or-whiteboard? sidebar? home?)
+             [:div {:key "page-unlinked-references"}
+              (reference/unlinked-references route-page-name)])])))))
 
-(rum/defcs page < rum/reactive
+(rum/defcs page < rum/static
   [state option]
-  (let [path-page-name (get-path-page-name state (:page-name option))
-        page-name (util/page-name-sanity-lc path-page-name)
-        repo (state/get-current-repo)
-        page (get-page-entity page-name)
-        block? (some? (:block/page page))
-        page-unloaded? (or (state/sub-page-unloaded? repo page-name) (nil? page))]
-    (if (and page-unloaded? (not block?))
-      (state/update-state! [repo :unloaded-pages] (fn [pages] (conj (set pages) page-name)))
-      (rum/with-key
-        (page-inner option)
-        (or (:page-name option)
-            (get-page-name state))))))
+  (rum/with-key
+    (page-inner option)
+    (or (:page-name option)
+        (get-page-name state))))
 
 (defonce layout (atom [js/window.innerWidth js/window.innerHeight]))
 

src/main/frontend/db/async.cljs

@@ -104,14 +104,15 @@
     (file-async/<get-file-based-property-values graph property)))
 
 (defn <get-block-and-children
-  [graph name-or-uuid & {:keys [children?]
-                         :or {children? true}}]
+  [graph name-or-uuid &loading? & {:keys [children?]
+                                   :or {children? true}}]
   (when-let [^Object sqlite @db-browser/*worker]
     (p/let [name' (str name-or-uuid)
             result (.get-block-and-children sqlite graph name' children?)
             {:keys [block children] :as result'} (edn/read-string result)
             conn (db/get-db graph false)
             _ (d/transact! conn (cons block children))]
+      (reset! &loading? false)
       (if children?
         block
         result'))))

src/main/frontend/db/restore.cljs

@@ -48,8 +48,6 @@
     ;; (db-migrate/migrate attached-db)
 
     (p/let [_ (p/delay 150)]          ; More time for UI refresh
-      (state/set-state! [repo :restore/unloaded-blocks] nil)
-      (state/set-state! [repo :restore/unloaded-pages] nil)
       (state/set-state! :graph/loading? false)
       (react/clear-query-state!)
       (state/pub-event! [:ui/re-render-root]))))

src/main/frontend/handler/whiteboard.cljs

@@ -204,11 +204,7 @@
   ([name]
    (p/let [uuid (or (and name (parse-uuid name)) (d/squuid))
            name (or name (str uuid))
-           repo (state/get-current-repo)
            _ (db/transact! (get-default-new-whiteboard-tx name uuid))]
-     ;; TODO: check to remove this
-     (state/update-state! [repo :unloaded-pages] (fn [pages] (conj (set pages)
-                                                                   (util/page-name-sanity-lc name))))
      name)))
 
 (defn <create-new-whiteboard-and-redirect!

src/main/frontend/modules/outliner/pipeline.cljs

@@ -18,10 +18,6 @@
               (:whiteboard/transact? tx-meta))
       (undo-redo/listen-db-changes! opts))))
 
-(defn- mark-pages-as-loaded!
-  [repo page-names]
-  (state/update-state! [repo :unloaded-pages] #(remove page-names %)))
-
 (defn- get-tx-id
   [tx-report]
   (get-in tx-report [:tempids :db/current-tx]))
@@ -65,10 +61,6 @@
       (when (seq new-datoms)
         (state/set-state! :editor/new-created-blocks (set (map :v new-datoms)))))
 
-    (let [pages (set (keep #(when (= :block/name (:a %)) (:v %)) tx-data))]
-      (when (seq pages)
-        (mark-pages-as-loaded! repo pages)))
-
     (if (or from-disk? new-graph?)
       (do
         (react/clear-query-state!)

src/main/frontend/state.cljs

@@ -2308,13 +2308,6 @@ Similar to re-frame subscriptions"
      (fn [s]
        (contains? s (str block-uuid))))))
 
-(defn sub-page-unloaded?
-  [repo page-name]
-  (rum/react
-   (rum/derived-atom [(rum/cursor-in state [repo :unloaded-pages])] [::page-unloaded repo page-name]
-                     (fn [s]
-                       (contains? s page-name)))))
-
 (defn get-color-accent []
   (get @state :ui/radix-color))