fix: Long pages got cut off when toggle on/off a nested bullet

close #5422

src/main/frontend/components/block.cljs

@@ -3192,6 +3192,7 @@
       (block-handler/load-more! db-id last-block-id))))
 
 (rum/defcs lazy-blocks < rum/reactive
+  (rum/local nil ::loading?)
   {:init (fn [state]
            (assoc state ::id (str (random-uuid))))}
   [state config flat-blocks blocks->vec-tree]
@@ -3201,13 +3202,16 @@
                       (map (fn [b]
                              (assoc b :ui/selected? (contains? selected-blocks (:block/uuid b)))) flat-blocks)
                       flat-blocks)
-        blocks (blocks->vec-tree flat-blocks)]
+        blocks (blocks->vec-tree flat-blocks)
+        *loading? (::loading? state)]
     (if-not db-id
       (block-list config blocks)
-      (let [bottom-reached (fn []
-                             ;; To prevent scrolling after inserting new blocks
-                             (when (> (- (util/time-ms) (:start-time config)) 100)
-                               (load-more-blocks! config flat-blocks)))
+      (let [loading-more-data! (fn []
+                                 ;; To prevent scrolling after inserting new blocks
+                                 (when (> (- (util/time-ms) (:start-time config)) 100)
+                                   (reset! *loading? true)
+                                   (load-more-blocks! config flat-blocks)
+                                   (reset! *loading? false)))
             has-more? (and
                        (>= (count flat-blocks) model/initial-blocks-length)
                        (some? (model/get-next-open-block (db/get-db) (last flat-blocks) db-id)))
@@ -3216,14 +3220,20 @@
          (ui/infinite-list
           "main-content-container"
           (block-list config blocks)
-          {:on-load bottom-reached
+          {:on-load loading-more-data!
            :bottom-reached (fn []
                              (when-let [node (gdom/getElement dom-id)]
-                               (ui/bottom-reached? node 1000)))
+                               (ui/bottom-reached? node 300)))
            :has-more has-more?
-           :more (if (or (:preview? config) (:sidebar? config))
+           :more (cond
+                   (or (:preview? config) (:sidebar? config))
                    "More"
-                   (ui/loading "Loading"))})]))))
+
+                   @*loading?
+                   (ui/lazy-loading-placeholder)
+
+                   :else
+                   "")})]))))
 
 (rum/defcs blocks-container <
   {:init (fn [state]

src/main/frontend/db/model.cljs

@@ -21,9 +21,9 @@
 
 ;; lazy loading
 
-(def initial-blocks-length 100)
+(def initial-blocks-length 50)
 
-(def step-loading-blocks 50)
+(def step-loading-blocks 25)
 
 
 ;; TODO: extract to specific models and move data transform logic to the
@@ -715,7 +715,8 @@
         (let [start-page? (:block/name (db-utils/entity start-id))]
           (when-not start-page?
             (let [previous-blocks (take-while (fn [b] (not= start-id (:db/id b))) @result)
-                  limit 25
+                  limit (inc (max (- initial-blocks-length (count previous-blocks))
+                                  (count tx-block-ids)))
                   more (get-paginated-blocks-no-cache current-db start-id {:limit limit
                                                                            :include-start? true
                                                                            :scoped-block-id scoped-block-id})]

src/main/frontend/db/react.cljs

@@ -72,7 +72,9 @@
 
 (defn- get-blocks-range
   [result-atom new-result]
-  (let [block? (and (coll? @result-atom) (map? (first @result-atom)) (:block/uuid (first @result-atom)))]
+  (let [block? (and (coll? new-result)
+                    (map? (first new-result))
+                    (:block/uuid (first new-result)))]
     (when block?
       {:old [(:db/id (first @result-atom))
              (:db/id (last @result-atom))]
@@ -84,7 +86,7 @@
   (when-let [result-atom (get-in @query-state [k :result])]
     (when tx-report
       (when-let [range (get-blocks-range result-atom new-result)]
-       (state/set-state! [:ui/pagination-blocks-range (get-in tx-report [:db-after :max-tx])] range)))
+        (state/set-state! [:ui/pagination-blocks-range (get-in tx-report [:db-after :max-tx])] range)))
     (reset! result-atom new-result)))
 
 (defn swap-new-result!
@@ -295,7 +297,7 @@
                       (d/q query db))
                     transform-fn)]
     (when-not (= new-result result)
-      (set-new-result! k new-result (:tx-report tx)))))
+      (set-new-result! k new-result tx))))
 
 (defn refresh!
   "Re-compute corresponding queries (from tx) and refresh the related react components."

src/main/frontend/modules/outliner/datascript.cljc

@@ -63,7 +63,8 @@
                  conn (conn/get-db repo false)
                  editor-cursor (state/get-current-edit-block-and-position)
                  meta (merge opts {:editor-cursor editor-cursor})
-                 rs (d/transact! conn txs (assoc meta :outliner/transact? true))]
+                 rs (d/transact! conn txs (assoc meta
+                                                 :outliner/transact? true))]
              (when true                 ; TODO: add debug flag
                (let [eids (distinct (mapv first (:tx-data rs)))
                      left&parent-list (->>

src/main/frontend/ui.cljs

@@ -900,6 +900,18 @@
      label-right]]
    (progress-bar width)])
 
+(rum/defc lazy-loading-placeholder
+  []
+  [:div.shadow.rounded-md.p-4.w-full.mx-auto.mb-5.fade-in {:style {:height 88}}
+   [:div.animate-pulse.flex.space-x-4
+    [:div.flex-1.space-y-3.py-1
+     [:div.h-2.bg-base-4.rounded]
+     [:div.space-y-3
+      [:div.grid.grid-cols-3.gap-4
+       [:div.h-2.bg-base-4.rounded.col-span-2]
+       [:div.h-2.bg-base-4.rounded.col-span-1]]
+      [:div.h-2.bg-base-4.rounded]]]]])
+
 (rum/defcs lazy-visible-inner
   [state visible? content-fn ref]
   [:div.lazy-visibility
@@ -911,15 +923,7 @@
         {:ref #(when-let [^js cls (and % (.-classList %))]
                  (.add cls "fade-enter-active"))}
         (content-fn)])
-     [:div.shadow.rounded-md.p-4.w-full.mx-auto.mb-5.fade-in {:style {:height 88}}
-      [:div.animate-pulse.flex.space-x-4
-       [:div.flex-1.space-y-3.py-1
-        [:div.h-2.bg-base-4.rounded]
-        [:div.space-y-3
-         [:div.grid.grid-cols-3.gap-4
-          [:div.h-2.bg-base-4.rounded.col-span-2]
-          [:div.h-2.bg-base-4.rounded.col-span-1]]
-         [:div.h-2.bg-base-4.rounded]]]]])])
+     (lazy-loading-placeholder))])
 
 (rum/defc lazy-visible
   ([content-fn]