fix: don't hide lazy components if they're above the current scroll top

mathisto · Jul 6, 2022 · d07f8ec · d07f8ec
1 parent 3c31448
commit d07f8ec
Showing 1 changed file with 7 additions and 13 deletions.
diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
@@ -926,16 +926,10 @@
 (rum/defc lazy-visible
   [content-fn]
   (let [[hasBeenSeen setHasBeenSeen] (rum/use-state false)
-        inViewState (useInView {:rootMargin "0px 0px 0px 0px"
-                                :on-change (fn [v] (when v (setHasBeenSeen v)))})]
-    (rum/use-effect!
-     #(when (gobj/get inViewState "inView") (setHasBeenSeen true))
-     [(gobj/get inViewState "inView")])
-    (pprint {:ref (gobj/get inViewState "ref")}) ;; TODO: Remove pprints
-    (pprint {:inView (gobj/get inViewState "inView")})
-    (pprint {:hasBeenSeen hasBeenSeen})
-    (lazy-visible-inner
-     hasBeenSeen
-     content-fn
-     (gobj/get inViewState "ref"))
-    ))
+        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)))