Browse Source

enhance(perf): view grouped results uses virtualized list

Tienson Qin 4 months ago
parent
commit
76a8f8ce62
1 changed files with 49 additions and 43 deletions
  1. 49 43
      src/main/frontend/components/views.cljs

+ 49 - 43
src/main/frontend/components/views.cljs

@@ -35,7 +35,6 @@
             [frontend.state :as state]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.ui :as ui]
             [frontend.util :as util]
             [frontend.util :as util]
-            [goog.dom :as gdom]
             [logseq.common.config :as common-config]
             [logseq.common.config :as common-config]
             [logseq.common.uuid :as common-uuid]
             [logseq.common.uuid :as common-uuid]
             [logseq.db :as ldb]
             [logseq.db :as ldb]
@@ -1965,48 +1964,55 @@
            (if (and group-by-property-ident (not (number? (first (:rows table)))))
            (if (and group-by-property-ident (not (number? (first (:rows table)))))
              (when (seq (:rows table))
              (when (seq (:rows table))
                [:div.flex.flex-col.border-t.pt-2.gap-2
                [: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))])
+                (ui/virtualized-list
+                 {:class (when list-view? "group-list-view")
+                  :custom-scroll-parent (util/app-scroll-container-node)
+                  :increase-viewport-by {:top 300 :bottom 300}
+                  :compute-item-key (fn [idx]
+                                      (str "table-group" idx))
+                  :skipAnimationFrameInResizeObserver true
+                  :total-count (count (:rows table))
+                  :item-content (fn [idx]
+                                  (let [[value group] (nth (:rows table) idx)]
+                                    (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)))))})])
              (view-cp view-entity table
              (view-cp view-entity table
                       (assoc option :group-by-property-ident group-by-property-ident)
                       (assoc option :group-by-property-ident group-by-property-ident)
                       view-opts)))])
                       view-opts)))])