chore: don't remember lazy visible components' height for now

src/main/frontend/components/block.cljs

@@ -2479,7 +2479,7 @@
        (fn []
          (block-container-inner state repo config block))
        nil
-       {:reset-height? false})
+       {})
       (block-container-inner state repo config block))))
 
 (defn divide-lists
@@ -2809,8 +2809,7 @@
    (ui/lazy-visible
     (fn [] (custom-query* config q))
     nil
-    {:reset-height? true})))
-
+    {})))
 (defn admonition
   [config type result]
   (when-let [icon (case (string/lower-case (name type))

src/main/frontend/components/journal.cljs

@@ -22,7 +22,7 @@
   (when-let [page-e (db/pull [:block/name (util/page-name-sanity-lc page)])]
     (page/page-blocks-cp repo page-e {})))
 
-(rum/defc journal-cp-inner < rum/reactive
+(rum/defc journal-cp < rum/reactive
   [[title format]]
   (let [;; Don't edit the journal title
         page (string/lower-case title)
@@ -54,7 +54,12 @@
        [:h1.title
         (gp-util/capitalize-all title)]]
 
-      (blocks-cp repo page format)
+      (if today?
+        (blocks-cp repo page format)
+        (ui/lazy-visible (fn []
+                           (blocks-cp repo page format))
+                         nil
+                         {}))
 
       {})
 
@@ -64,11 +69,6 @@
        (reference/references title)
        (str title "-refs"))]))
 
-(rum/defc journal-cp
-  [journal]
-  (ui/lazy-visible (fn [] (journal-cp-inner journal)) nil
-                   {:reset-height? true}))
-
 (rum/defc journals < rum/reactive
   [latest-journals]
   [:div#journals

src/main/frontend/components/reference.cljs

@@ -170,7 +170,7 @@
     (fn []
       (references* page-name))
     nil
-    {:reset-height? false})))
+    {})))
 
 (rum/defcs unlinked-references-aux
   < rum/reactive db-mixins/query

src/main/frontend/handler.cljs

@@ -33,8 +33,7 @@
             [goog.object :as gobj]
             [lambdaisland.glogi :as log]
             [promesa.core :as p]
-            [frontend.db.persist :as db-persist]
-            [goog.events :as goog-events]))
+            [frontend.db.persist :as db-persist]))
 
 (defn set-global-error-notification!
   []
@@ -49,18 +48,6 @@
             ;;  false)
             ))))
 
-(defn listen-to-scroll!
-  []
-  (let [*scroll-timer (atom nil)]
-    (goog-events/listen js/window
-                        "scroll"
-                        (fn []
-                          (when @*scroll-timer
-                            (js/clearTimeout @*scroll-timer))
-                          (state/set-state! :ui/scrolling? true)
-                          (reset! *scroll-timer (js/setTimeout
-                                                 (fn [] (state/set-state! :ui/scrolling? false)) 500)))
-                        false)))
 
 (defn- watch-for-date!
   []
@@ -200,8 +187,6 @@
        (notification/show! "Sorry, it seems that your browser doesn't support IndexedDB, we recommend to use latest Chrome(Chromium) or Firefox(Non-private mode)." :error false)
        (state/set-indexedb-support! false)))
 
-    (listen-to-scroll!)
-
     (react/run-custom-queries-when-idle!)
 
     (events/run!)

src/main/frontend/ui.cljs

@@ -886,54 +886,27 @@
 (rum/defcs lazy-visible-inner < rum/reactive
   {:init (fn [state]
            (assoc state
-                  ::ref (atom nil)
-                  ::height (atom 24)))
-   :did-mount (fn [state]
-                (let [element @(::ref state)
-                      observer (js/ResizeObserver.
-                                (fn [entries]
-                                  (let [element @(::ref state)
-                                        entry (first entries)
-                                        *height (::height state)
-                                        height' (.-height (.-contentRect entry))]
-                                    (cond
-                                      (and element
-                                           (zero? (.-length (.-children element))))
-                                      (reset! *height 0)
-
-                                      (:ui/scrolling? @state/state)
-                                      (when (> height' @*height)
-                                        (reset! *height height'))
-
-                                      :else
-                                      (when-not (<= height' 1)
-                                        (reset! *height height'))))))]
-                  (.observe observer element))
-                state)}
-  [state visible? content-fn _opts]
-  (let [height-zero? (zero? (rum/react (::height state)))]
-    [:div.lazy-visibility {:ref #(reset! (::ref state) %)
-                           :style {:height (if (and visible? height-zero?)
-                                             0
-                                             (::height state))}}
-     (if visible?
-       (when (fn? content-fn) (content-fn))
-       [:div.shadow.rounded-md.p-4.w-full.mx-auto.fade-in.delay-1000.mb-5 {: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]]]]])]))
+                  ::ref (atom nil)))}
+  [state visible? content-fn]
+  [:div.lazy-visibility
+   {:ref #(reset! (::ref state) %)
+    :style {:min-height 24}}
+   (if visible?
+     (when (fn? content-fn) (content-fn))
+     [:div.shadow.rounded-md.p-4.w-full.mx-auto.mb-5 {: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 <
   (rum/local false ::visible?)
   (rum/local true ::active?)
-  [state content-fn sensor-opts
-   {:keys [once?]
-    :as opts}]
+  [state content-fn sensor-opts {:keys [once?]}]
   (let [*active? (::active? state)]
     (if (or (util/mobile?) (mobile-util/native-platform?))
       (content-fn)
@@ -951,4 +924,4 @@
            :scrollThrottle 500
            :active @*active?}
           sensor-opts)
-         (lazy-visible-inner @*visible? content-fn opts))))))
+         (lazy-visible-inner @*visible? content-fn))))))