fix: cache visible component heights

averitas · May 13, 2022 · 8a8e3ee · 8a8e3ee
1 parent 22d4166
commit 8a8e3ee
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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