From 8a8e3ee26c5d536f66338811ad40a21e04c80bee Mon Sep 17 00:00:00 2001
From: Tienson Qin <tiensonqin@gmail.com>
Date: Fri, 13 May 2022 10:00:38 +0800
Subject: [PATCH] fix: cache visible component heights

---
 externs.js                |  3 +++
 src/main/frontend/ui.cljs | 20 +++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/externs.js b/externs.js
index 36017644f2d..3bf6ca9961a 100644
--- a/externs.js
+++ b/externs.js
@@ -127,6 +127,9 @@ dummy.getNodesObjects = function() {};
 dummy.getEdgesObjects = function() {};
 dummy.alphaTarget = function() {};
 dummy.restart = function() {};
+dummy.observe = function() {};
+dummy.contentRect = function() {};
+dummy.height = function() {};
 
 /**
  * @typedef {{
diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
index f60219091fa..7de3e5c7f18 100644
--- a/src/main/frontend/ui.cljs
+++ b/src/main/frontend/ui.cljs
@@ -911,9 +911,23 @@
      label-right]]
    (progress-bar width)])
 
-(rum/defc lazy-visible-inner
-  [visible? content-fn loading-label]
-  [:div.lazy-visibility
+(rum/defcs lazy-visible-inner <
+  {:init (fn [state]
+           (assoc state
+                  ::ref (atom nil)
+                  ::height (atom 1)))
+   :did-mount (fn [state]
+                (let [observer (js/ResizeObserver. (fn [entries]
+                                                     (let [entry (first entries)
+                                                           *height (::height state)
+                                                           height' (.-height (.-contentRect entry))]
+                                                       (when (> height' @*height)
+                                                         (reset! *height height')))))]
+                  (.observe observer @(::ref state)))
+                state)}
+  [state visible? content-fn loading-label]
+  [:div.lazy-visibility {:ref #(reset! (::ref state) %)
+                         :style {:min-height @(::height state)}}
    (if visible?
      (when (fn? content-fn) (content-fn))
      (when loading-label [:span.text-sm.font-medium