3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 06:51:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add lazy loading of thumbnails on dashboard

Browse source
This commit is contained in:
Andrey Antukh 2022-09-28 09:40:14 +02:00
parent 8fec5af55e
commit 748499a26f
5 changed files with 250 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/app/main/ui/hooks.cljs
View file

@ -29,7 +29,7 @@
(defn use-rxsub
[ob]
(let [[state reset-state!] (mf/useState @ob)]
(let [[state reset-state!] (mf/useState #(if (satisfies? IDeref ob) @ob nil))]
(mf/useEffect
(fn []
(let [sub (rx/subscribe ob #(reset-state! %))]
@ -313,3 +313,39 @@
(use-stream stream (partial reset! state))
state))
(defonce ^:private intersection-subject (rx/subject))
(defonce ^:private intersection-observer
(delay (js/IntersectionObserver.
(fn [entries _]
(run! (partial rx/push! intersection-subject) (seq entries)))
#js {:rootMargin "0px"
:threshold 1.0})))
(defn use-visible
[ref & {:keys [once?]}]
(let [[state update-state!] (mf/useState false)]
(mf/with-effect [once?]
(let [node (mf/ref-val ref)
stream (->> intersection-subject
(rx/filter (fn [entry]
(let [target (unchecked-get entry "target")]
(identical? target node))))
(rx/map (fn [entry]
(let [ratio (unchecked-get entry "intersectionRatio")
intersecting? (unchecked-get entry "isIntersecting")]
(or intersecting? (> ratio 0.5)))))
(rx/dedupe))
stream (if once?
(->> stream
(rx/filter identity)
(rx/take 1))
stream)
subs (rx/subscribe stream update-state!)]
(.observe ^js @intersection-observer node)
(fn []
(.unobserve ^js @intersection-observer node)
(rx/dispose! subs))))
state))