perf: recycle dom nodes when folding references

src/main/frontend/components/block.cljs

@@ -4481,15 +4481,16 @@
               [:div
                (page-cp config page)
                (when alias? [:span.text-sm.font-medium.opacity-50 " Alias"])]
-              (let [{top-level-blocks true others false} (group-by
-                                                          (fn [b] (= (:db/id page) (:db/id (first b))))
-                                                          parent-blocks)
-                    sorted-parent-blocks (concat top-level-blocks others)]
-                (for [[parent blocks] sorted-parent-blocks]
-                  (let [top-level? (= (:db/id parent) (:db/id page))]
-                    (rum/with-key
-                      (breadcrumb-with-container blocks (assoc config :top-level? top-level?))
-                      (:db/id parent)))))
+              (fn []
+                (let [{top-level-blocks true others false} (group-by
+                                                            (fn [b] (= (:db/id page) (:db/id (first b))))
+                                                            parent-blocks)
+                      sorted-parent-blocks (concat top-level-blocks others)]
+                  (for [[parent blocks] sorted-parent-blocks]
+                    (let [top-level? (= (:db/id parent) (:db/id page))]
+                      (rum/with-key
+                        (breadcrumb-with-container blocks (assoc config :top-level? top-level?))
+                        (:db/id parent))))))
               {:debug-id page})])))]
 
      (and (:ref? config) (:group-by-page? config) (vector? (first blocks)))
@@ -4528,7 +4529,8 @@
                   [:div
                    (page-cp config page)
                    (when alias? [:span.text-sm.font-medium.opacity-50 " Alias"])]
-                  (when-not whiteboard? (blocks-container config blocks))
+                  (fn []
+                    (when-not whiteboard? (blocks-container config blocks)))
                   {})])))))]
 
      :else

src/main/frontend/components/reference.cljs

@@ -53,7 +53,7 @@
   (let [block (db/sub-block (:db/id entity))]
     (references-aux block config)))
 
-(rum/defc references-inner
+(rum/defc references
   [entity config]
   (when-let [id (:db/id entity)]
     (let [[has-references? set-has-references!] (hooks/use-state nil)]
@@ -71,13 +71,6 @@
                                "Linked References: Unexpected error. Please re-index your graph first."))
          (references-cp entity config))))))
 
-(rum/defc references
-  [entity config]
-  (ui/lazy-visible
-   (fn []
-     (references-inner entity config))
-   {}))
-
 (rum/defc unlinked-references
   [entity config]
   (when-let [id (:db/id entity)]

src/main/frontend/components/scheduled_deadlines.cljs

@@ -1,14 +1,14 @@
 (ns frontend.components.scheduled-deadlines
-  (:require [frontend.date :as date]
-            [frontend.state :as state]
-            [frontend.ui :as ui]
-            [frontend.components.content :as content]
+  (:require [clojure.string :as string]
             [frontend.components.block :as block]
-            [clojure.string :as string]
+            [frontend.components.content :as content]
             [frontend.components.editor :as editor]
-            [rum.core :as rum]
+            [frontend.date :as date]
             [frontend.db.async :as db-async]
-            [promesa.core :as p]))
+            [frontend.state :as state]
+            [frontend.ui :as ui]
+            [promesa.core :as p]
+            [rum.core :as rum]))
 
 (defn- scheduled-or-deadlines?
   [page-name]
@@ -16,7 +16,7 @@
        (not (true? (state/scheduled-deadlines-disabled?)))
        (= (string/lower-case page-name) (string/lower-case (date/journal-name)))))
 
-(rum/defcs scheduled-and-deadlines-inner < rum/reactive
+(rum/defcs scheduled-and-deadlines < rum/reactive
   {:init (fn [state]
            (let [*result (atom nil)
                  page-name (first (:rum/args state))]
@@ -29,19 +29,15 @@
     (when (seq scheduled-or-deadlines)
       [:div.scheduled-or-deadlines.mt-8
        (ui/foldable
-        [:h2.font-medium "SCHEDULED AND DEADLINE"]
-        [:div.scheduled-deadlines.references-blocks.mb-6
-         (let [ref-hiccup (block/->hiccup scheduled-or-deadlines
-                                          {:id (str page-name "-agenda")
-                                           :ref? true
-                                           :group-by-page? true
-                                           :editor-box editor/box}
-                                          {})]
-           (content/content page-name {:hiccup ref-hiccup}))]
-        {:title-trigger? true})])))
-
-(rum/defc scheduled-and-deadlines
-  [page-name]
-  (ui/lazy-visible
-   (fn [] (scheduled-and-deadlines-inner page-name))
-   {:debug-id "scheduled-and-deadlines"}))
+        [:div "SCHEDULED AND DEADLINE"]
+        (fn []
+          [:div.scheduled-deadlines.references-blocks.mb-6
+           (let [ref-hiccup (block/->hiccup scheduled-or-deadlines
+                                            {:id (str page-name "-agenda")
+                                             :ref? true
+                                             :group-by-page? true
+                                             :editor-box editor/box}
+                                            {})]
+             (content/content page-name {:hiccup ref-hiccup}))])
+        {:title-trigger? true
+         :default-collapsed? true})])))

src/main/frontend/components/views.cljs

@@ -1531,8 +1531,9 @@
            (shui/table-footer (add-new-row (:view-entity option) table)))]]))))
 
 (rum/defc list-view < rum/static
-  [{:keys [config ref-matched-children-ids] :as option} view-entity {:keys [rows]} *scroller-ref]
-  (let [lazy-item-render (fn [rows idx]
+  [{:keys [config ref-matched-children-ids view-feature-type] :as option} view-entity {:keys [rows]} *scroller-ref]
+  (let [references-view? (contains? #{:linked-references :unlinked-references} view-feature-type)
+        lazy-item-render (fn [rows idx]
                            (lazy-item rows idx (assoc option :list-view? true)
                                       (fn [block]
                                         (let [config' (cond->
@@ -1544,17 +1545,21 @@
                                           (block-container config' block)))))
         list-cp (fn [rows]
                   (when (seq rows)
-                    (ui/virtualized-list
-                     {:ref #(reset! *scroller-ref %)
-                      :class "content"
-                      :custom-scroll-parent (get-scroll-parent config)
-                      :increase-viewport-by {:top 64 :bottom 64}
-                      :compute-item-key (fn [idx]
-                                          (let [block-id (util/nth-safe rows idx)]
-                                            (str "list-row-" block-id)))
-                      :total-count (count rows)
-                      :skipAnimationFrameInResizeObserver true
-                      :item-content (fn [idx] (lazy-item-render rows idx))})))
+                    (if references-view?
+                      [:div.content
+                       (for [[idx _row] (medley/indexed rows)]
+                         (lazy-item-render rows idx))]
+                      (ui/virtualized-list
+                       {:ref #(reset! *scroller-ref %)
+                        :class "content"
+                        :custom-scroll-parent (get-scroll-parent config)
+                        :increase-viewport-by {:top 64 :bottom 64}
+                        :compute-item-key (fn [idx]
+                                            (let [block-id (util/nth-safe rows idx)]
+                                              (str "list-row-" block-id)))
+                        :total-count (count rows)
+                        :skipAnimationFrameInResizeObserver true
+                        :item-content (fn [idx] (lazy-item-render rows idx))}))))
         breadcrumb (state/get-component :block/breadcrumb)
         all-numbers? (every? number? rows)]
     (if all-numbers?
@@ -1943,61 +1948,62 @@
      {:ref *view-ref}
      (ui/foldable
       (view-head view-parent view-entity table columns input sorting set-input! add-new-object! option)
-      [:div.ls-view-body.flex.flex-col.gap-2.grid.mt-1
-       (filters-row view-entity table option)
-
-       (let [view-opts {:*scroller-ref *scroller-ref
-                        :display-type display-type
-                        :row-selection row-selection
-                        :add-new-object! add-new-object!}]
-         (if (and group-by-property-ident (not (number? (first (:rows table)))))
-           (when (seq (:rows table))
-             [:div.flex.flex-col.border-t.pt-2.gap-2
-              (map-indexed
-               (fn [idx [value group]]
-                 (let [add-new-object! (when (fn? add-new-object!)
-                                         (fn [_]
-                                           (add-new-object! view-entity table
-                                                            {:properties {(:db/ident group-by-property) (or (and (map? value) (:db/id value)) value)}})))
-                       table' (shui/table-option (-> table-map
-                                                     (assoc-in [:data-fns :add-new-object!] add-new-object!)
-                                                     (assoc :data group ; data for this group
-                                                            )))
-                       readable-property-value #(cond (and (map? %) (or (:block/title %) (:logseq.property/value %)))
-                                                      (db-property/property-value-content %)
-                                                      (= (:db/ident %) :logseq.property/empty-placeholder)
-                                                      "Empty"
-                                                      :else
-                                                      (str %))
-                       group-by-page? (or (= :block/page group-by-property-ident)
-                                          (and (not db-based?) (contains? #{:linked-references :unlinked-references} display-type)))]
-                   (rum/with-key
-                     (ui/foldable
-                      [:div
-                       {:class (when-not list-view? "my-4")}
-                       (cond
-                         group-by-page?
-                         (if value
-                           (let [c (state/get-component :block/page-cp)]
-                             (c {:disable-preview? true} value))
-                           [:div.text-muted-foreground.text-sm
-                            "Pages"])
-
-                         (some? value)
-                         (let [icon (pu/get-block-property-value value :logseq.property/icon)]
-                           [:div.flex.flex-row.gap-1.items-center
-                            (when icon (icon-component/icon icon {:color? true}))
-                            (readable-property-value value)])
-                         :else
-                         (str "No " (:block/title group-by-property)))]
-                      (let [render (view-cp view-entity (assoc table' :rows group) option view-opts)]
-                        (if list-view? [:div.-ml-2 render] render))
-                      {:title-trigger? false})
-                     (str (:db/id view-entity) "-group-idx-" idx))))
-               (:rows table))])
-           (view-cp view-entity table
-                    (assoc option :group-by-property-ident group-by-property-ident)
-                    view-opts)))]
+      (fn []
+        [:div.ls-view-body.flex.flex-col.gap-2.grid.mt-1
+         (filters-row view-entity table option)
+
+         (let [view-opts {:*scroller-ref *scroller-ref
+                          :display-type display-type
+                          :row-selection row-selection
+                          :add-new-object! add-new-object!}]
+           (if (and group-by-property-ident (not (number? (first (:rows table)))))
+             (when (seq (:rows table))
+               [:div.flex.flex-col.border-t.pt-2.gap-2
+                (map-indexed
+                 (fn [idx [value group]]
+                   (let [add-new-object! (when (fn? add-new-object!)
+                                           (fn [_]
+                                             (add-new-object! view-entity table
+                                                              {:properties {(:db/ident group-by-property) (or (and (map? value) (:db/id value)) value)}})))
+                         table' (shui/table-option (-> table-map
+                                                       (assoc-in [:data-fns :add-new-object!] add-new-object!)
+                                                       (assoc :data group ; data for this group
+                                                              )))
+                         readable-property-value #(cond (and (map? %) (or (:block/title %) (:logseq.property/value %)))
+                                                        (db-property/property-value-content %)
+                                                        (= (:db/ident %) :logseq.property/empty-placeholder)
+                                                        "Empty"
+                                                        :else
+                                                        (str %))
+                         group-by-page? (or (= :block/page group-by-property-ident)
+                                            (and (not db-based?) (contains? #{:linked-references :unlinked-references} display-type)))]
+                     (rum/with-key
+                       (ui/foldable
+                        [:div
+                         {:class (when-not list-view? "my-4")}
+                         (cond
+                           group-by-page?
+                           (if value
+                             (let [c (state/get-component :block/page-cp)]
+                               (c {:disable-preview? true} value))
+                             [:div.text-muted-foreground.text-sm
+                              "Pages"])
+
+                           (some? value)
+                           (let [icon (pu/get-block-property-value value :logseq.property/icon)]
+                             [:div.flex.flex-row.gap-1.items-center
+                              (when icon (icon-component/icon icon {:color? true}))
+                              (readable-property-value value)])
+                           :else
+                           (str "No " (:block/title group-by-property)))]
+                        (let [render (view-cp view-entity (assoc table' :rows group) option view-opts)]
+                          (if list-view? [:div.-ml-2 render] render))
+                        {:title-trigger? false})
+                       (str (:db/id view-entity) "-group-idx-" idx))))
+                 (:rows table))])
+             (view-cp view-entity table
+                      (assoc option :group-by-property-ident group-by-property-ident)
+                      view-opts)))])
       (merge {:title-trigger? false} foldable-options))]))
 
 (rum/defcs view-container

src/main/frontend/state.cljs

@@ -416,7 +416,7 @@
                       [(>= ?d ?start)]
                       [(<= ?d ?today)]]
              :inputs [:14d :today]
-             :collapsed? false}
+             :collapsed? true}
             {:title [:span (shui/tabler-icon "Todo" {:class "align-middle pr-1"}) [:span.align-middle "TODO"]]
              :query '[:find (pull ?b [*])
                       :in $ ?start ?next
@@ -428,7 +428,7 @@
                       [(< ?d ?next)]]
              :inputs [:today :7d-after]
              :group-by-page? false
-             :collapsed? false}]}
+             :collapsed? true}]}
           :ui/hide-empty-properties? false}))
 
 ;; State that most user config is dependent on