perf: don't trigger <get-block when scrolling table view

deps/shui/src/logseq/shui/table/core.cljc

@@ -282,7 +282,7 @@
 (rum/defc table-cell < rum/static
   [& prop-and-children]
   (let [[prop children] (get-prop-and-children prop-and-children)]
-    [:div.ls-table-cell.flex.relative prop
+    [:div.ls-table-cell.flex.relative (dissoc prop :select? :add-property?)
      [:div {:class (str "flex align-middle w-full overflow-x-clip items-center"
                         (cond
                           (:select? prop)

src/main/frontend/components/block.cljs

@@ -906,7 +906,7 @@
 (rum/defcs page-cp-inner < db-mixins/query rum/reactive
   {:init (fn [state]
            (let [args (:rum/args state)
-                 page (last args)
+                 [config page] args
                  *result (atom nil)
                  page-id-or-name (or (:db/id page)
                                      (:block/uuid page)
@@ -916,7 +916,7 @@
              (cond
                page-entity
                (reset! *result page-entity)
-               (:skip-async-load? (first args))
+               (or (:skip-async-load? config) (:table-view? config))
                (reset! *result page)
                :else
                (p/let [result (db-async/<get-block (state/get-current-repo) page-id-or-name {:children? false
@@ -928,7 +928,7 @@
   "Component for a page. `page` argument contains :block/name which can be (un)sanitized page name.
    Keys for `config`:
    - `:preview?`: Is this component under preview mode? (If true, `page-preview-trigger` won't be registered to this `page-cp`)"
-  [state {:keys [label children preview? disable-preview? show-non-exists-page? tag? _skip-async-load?] :as config} page]
+  [state {:keys [label children preview? disable-preview? show-non-exists-page? table-view? tag? _skip-async-load?] :as config} page]
   (when-let [entity' (rum/react (:*entity state))]
     (let [entity (db/sub-block (:db/id entity'))]
       (cond
@@ -957,7 +957,7 @@
         (and (:block/name page) (util/uuid-string? (:block/name page)))
         (invalid-node-ref (:block/name page))
 
-        (and (:block/name page) show-non-exists-page?)
+        (and (:block/name page) (or show-non-exists-page? table-view?))
         (page-inner config (merge
                             {:block/title (:block/name page)
                              :block/name (:block/name page)}

src/main/frontend/components/property/value.cljs

@@ -1013,7 +1013,7 @@
         (inline-text {} :markdown (str value'))))))
 
 (rum/defc select-item
-  [property type value {:keys [page-cp inline-text other-position? property-position _icon?] :as opts}]
+  [property type value {:keys [page-cp inline-text other-position? property-position table-view? _icon?] :as opts}]
   (let [closed-values? (seq (:property/closed-values property))
         tag? (or (:tag? opts) (= (:db/ident property) :block/tags))
         inline-text-cp (fn [content]
@@ -1037,12 +1037,13 @@
            (page-cp {:disable-preview? true
                      :tag? tag?
                      :property-position property-position
-                     :meta-click? other-position?} value)
+                     :meta-click? other-position?
+                     :table-view? table-view?} value)
            (:db/id value)))
 
        (contains? #{:node :class :property :page} type)
        (when-let [reference (state/get-component :block/reference)]
-         (reference {} (:block/uuid value)))
+         (reference {:table-view? table-view?} (:block/uuid value)))
 
        (and (map? value) (some? (db-property/property-value-content value)))
        (let [content (str (db-property/property-value-content value))]

src/main/frontend/components/views.cljs

@@ -599,7 +599,7 @@
                                              (on-delete-rows view-parent view-feature-type table selected-ids))))]))))
 
 (rum/defc table-row-inner < rum/static
-  [{:keys [row-selected?] :as table} row props {:keys [show-add-property?]}]
+  [{:keys [row-selected?] :as table} row props {:keys [show-add-property? scrolling?]}]
   (let [pinned-columns (get-in table [:state :pinned-columns])
         unpinned (get-in table [:state :unpinned-columns])
         unpinned-columns (if show-add-property?
@@ -609,27 +609,31 @@
                            unpinned)
         sized-columns (get-in table [:state :sized-columns])
         row-cell-f (fn [column {:keys [_lazy?]}]
-                     (when-let [render (get column :cell)]
-                       (let [id (str (:id row) "-" (:id column))
-                             width (get-column-size column sized-columns)
-                             select? (= (:id column) :select)
-                             add-property? (= (:id column) :add-property)
-                             style {:width width :min-width width}
-                             cell-opts {:key id
-                                        :select? select?
-                                        :add-property? add-property?
-                                        :style style}]
-                         (shui/table-cell cell-opts (render table row column style)))))]
+                     (if scrolling?
+                       [:div]
+                       (when-let [render (get column :cell)]
+                         (let [id (str (:id row) "-" (:id column))
+                               width (get-column-size column sized-columns)
+                               select? (= (:id column) :select)
+                               add-property? (= (:id column) :add-property)
+                               style {:width width :min-width width}
+                               cell-opts {:key id
+                                          :select? select?
+                                          :add-property? add-property?
+                                          :style style}]
+                           (shui/table-cell cell-opts (render table row column style))))))]
     (shui/table-row
      (merge
       props
       {:key (str (:db/id row))
        :data-state (when (row-selected? row) "selected")
        :on-pointer-down (fn [_e] (db-async/<get-block (state/get-current-repo) (:db/id row) {:children? false}))})
-     [:div.sticky-columns.flex.flex-row
-      (map #(row-cell-f % {}) pinned-columns)]
-     [:div.flex.flex-row
-      (map #(row-cell-f % {:lazy? true}) unpinned-columns)])))
+     (when (seq pinned-columns)
+       [:div.sticky-columns.flex.flex-row
+        (map #(row-cell-f % {}) pinned-columns)])
+     (when (seq unpinned-columns)
+       [:div.flex.flex-row
+        (map #(row-cell-f % {:lazy? true}) unpinned-columns)]))))
 
 (rum/defc table-row < rum/reactive db-mixins/query
   [table row props option]
@@ -1187,7 +1191,7 @@
         (set-sized-columns! sized-columns)))}))
 
 (rum/defc lazy-item
-  [data idx {:keys [properties list-view?]} item-render]
+  [data idx {:keys [properties list-view? scrolling?]} item-render]
   (let [item (util/nth-safe data idx)
         db-id (cond (map? item) (:db/id item)
                     (number? item) item
@@ -1203,33 +1207,39 @@
     (hooks/use-effect!
      #(c.m/run-task*
        (m/sp
-         (when (and db-id (not item))
+         (when (and db-id (not item) (not scrolling?))
            (let [block (c.m/<? (db-async/<get-block (state/get-current-repo) db-id opts))
                  block' (if list-view? (db/entity db-id) block)]
              (set-item! block')))))
-     [db-id])
+     [db-id scrolling?])
     (let [item' (cond (map? item) item (number? item) {:db/id item})]
       (item-render item'))))
 
 (rum/defc table-body < rum/static
   [table option rows *scroller-ref *rows-wrap set-items-rendered!]
-  (when (seq rows)
-    (ui/virtualized-list
-     {:ref #(reset! *scroller-ref %)
-      :custom-scroll-parent (or (some-> (rum/deref *rows-wrap) (.closest ".sidebar-item-list"))
-                                (gdom/getElement "main-content-container"))
-      :compute-item-key (fn [idx]
-                          (let [block-id (util/nth-safe rows idx)]
-                            (str "table-row-" (:group-idx option) "-" block-id)))
-      :skipAnimationFrameInResizeObserver true
-      :total-count (count rows)
-      :item-content (fn [idx]
-                      (lazy-item (:data table) idx (assoc option :table-view? true)
-                                 (fn [row]
-                                   (table-row table row {} option))))
-      :items-rendered (fn [props]
-                        (when (seq props)
-                          (set-items-rendered! true)))})))
+  (let [[scrolling? set-scrolling!] (hooks/use-state false)]
+    (when (seq rows)
+      (ui/virtualized-list
+       {:ref #(reset! *scroller-ref %)
+        :custom-scroll-parent (or (some-> (rum/deref *rows-wrap) (.closest ".sidebar-item-list"))
+                                  (gdom/getElement "main-content-container"))
+        :compute-item-key (fn [idx]
+                            (let [block-id (util/nth-safe rows idx)]
+                              (str "table-row-" (:group-idx option) "-" block-id)))
+        :skipAnimationFrameInResizeObserver true
+        :total-count (count rows)
+        :context {:scrolling scrolling?}
+        :is-scrolling set-scrolling!
+        :item-content (fn [idx _user ^js context]
+                        (let [option (assoc option
+                                            :scrolling? (.-scrolling context)
+                                            :table-view? true)]
+                          (lazy-item (:data table) idx option
+                                     (fn [row]
+                                       (table-row table row {} option)))))
+        :items-rendered (fn [props]
+                          (when (seq props)
+                            (set-items-rendered! true)))}))))
 
 (rum/defc table-view < rum/static
   [table option row-selection *scroller-ref]