Another fix for page bouncing for lazy loading (logseq#5973)

* Another fix for page bouncing for lazy loading

related to logseq#5972

* Disable lazy loading temporally on mobile

* fix: scheduled or deadlines

* fix: page shaking when scrolling upwards

src/main/frontend/components/block.cljs

@@ -2907,7 +2907,9 @@
   (ui/catch-error
    (ui/block-error "Query Error:" {:content (:query q)})
    (ui/lazy-visible
-    (fn [] (custom-query* config q)))))
+    (fn [] (custom-query* config q))
+    "custom-query")))
+
 (defn admonition
   [config type result]
   (when-let [icon (case (string/lower-case (name type))

src/main/frontend/components/journal.cljs

@@ -56,7 +56,7 @@
 
       (if today?
         (blocks-cp repo page format)
-        (ui/lazy-visible (fn [] (blocks-cp repo page format))))
+        (ui/lazy-visible (fn [] (blocks-cp repo page format)) page))
 
       {})
 

src/main/frontend/components/reference.cljs

@@ -63,30 +63,32 @@
          (content/content block-id
                           {:hiccup ref-hiccup})]))))
 
+(defn- scheduled-or-deadlines?
+  [page-name]
+  (and (date/valid-journal-title? (string/capitalize page-name))
+       (not (true? (state/scheduled-deadlines-disabled?)))
+       (= (string/lower-case page-name) (string/lower-case (date/journal-name)))))
+
 (rum/defcs references* < rum/reactive db-mixins/query
   (rum/local nil ::n-ref)
   {:init (fn [state]
            (let [page-name (first (:rum/args state))
                  filters (when page-name
                            (atom (page-handler/get-filters (string/lower-case page-name))))]
              (assoc state ::filters filters)))}
-  [state page-name]
+  [state page-name refed-blocks-ids]
   (when page-name
     (let [page-name (string/lower-case page-name)
           repo (state/get-current-repo)
           threshold (state/get-linked-references-collapsed-threshold)
-          refed-blocks-ids (model-db/get-referenced-blocks-ids page-name)
           *n-ref (::n-ref state)
           n-ref (or (rum/react *n-ref) (count refed-blocks-ids))
           default-collapsed? (>= (count refed-blocks-ids) threshold)
           filters-atom (get state ::filters)
           filter-state (rum/react filters-atom)
           block-id (parse-uuid page-name)
           page-name (string/lower-case page-name)
-          journal? (date/valid-journal-title? (string/capitalize page-name))
-          scheduled-or-deadlines (when (and journal?
-                                            (not (true? (state/scheduled-deadlines-disabled?)))
-                                            (= page-name (string/lower-case (date/journal-name))))
+          scheduled-or-deadlines (when (scheduled-or-deadlines? page-name)
                                    (db/get-date-scheduled-or-deadlines (string/capitalize page-name)))]
       (when (or (seq refed-blocks-ids)
                 (seq scheduled-or-deadlines)
@@ -163,13 +165,17 @@
              {:default-collapsed? default-collapsed?
               :title-trigger? true}))]]))))
 
-(rum/defc references
+(rum/defc references < rum/reactive db-mixins/query
   [page-name]
-  (ui/catch-error
-   (ui/component-error "Linked References: Unexpected error")
-   (ui/lazy-visible
-    (fn []
-      (references* page-name)))))
+  (let [refed-blocks-ids (when page-name (model-db/get-referenced-blocks-ids page-name))]
+    (when (or (seq refed-blocks-ids)
+              (scheduled-or-deadlines? page-name))
+      (ui/catch-error
+       (ui/component-error "Linked References: Unexpected error")
+       (ui/lazy-visible
+        (fn []
+          (references* page-name refed-blocks-ids))
+        (str "ref-" page-name))))))
 
 (rum/defcs unlinked-references-aux
   < rum/reactive db-mixins/query

src/main/frontend/ui.cljs

@@ -922,12 +922,23 @@
          [:div.h-2.bg-base-4.rounded]]]]])])
 
 (rum/defc lazy-visible
-  [content-fn]
-  (let [[hasBeenSeen setHasBeenSeen] (rum/use-state false)
-        inViewState (useInView #js {:rootMargin "100px"
-                                    :onChange (fn [v entry]
-                                                (let [self-top (.-top (.-boundingClientRect entry))
-                                                      v (if v v (if (> self-top 0) false true))]
-                                                  (setHasBeenSeen v)))})
-        ref (.-ref inViewState)]
-    (lazy-visible-inner hasBeenSeen content-fn ref)))
+  ([content-fn]
+   (lazy-visible content-fn nil))
+  ([content-fn _debug-id]
+   (if (or (util/mobile?) (mobile-util/native-platform?))
+     (content-fn)
+     (let [[hasBeenSeen setHasBeenSeen] (rum/use-state false)
+           [last-changed-time set-last-changed-time!] (rum/use-state nil)
+           inViewState (useInView #js {:rootMargin "100px"
+                                       :onChange (fn [in-view? entry]
+                                                   (let [self-top (.-top (.-boundingClientRect entry))
+                                                         time' (util/time-ms)]
+                                                     (when (or in-view?
+                                                               (and
+                                                                (nil? last-changed-time)
+                                                                (> (- time' last-changed-time) 50)
+                                                                (<= self-top 0)))
+                                                       (set-last-changed-time! time')
+                                                       (setHasBeenSeen in-view?))))})
+           ref (.-ref inViewState)]
+       (lazy-visible-inner hasBeenSeen content-fn ref)))))