From 075b362c1c986582ff2ce0436290866db32d7cc0 Mon Sep 17 00:00:00 2001
From: Danil Uzlov <36223296+d-uzlov@users.noreply.github.com>
Date: Fri, 2 Feb 2024 14:10:58 +0700
Subject: [PATCH] re-enable observer for moved elements (#4486)

Signed-off-by: Danil Uzlov <danil.uzlov@xored.com>
---
 packages/ui/src/lazy.ts | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/lazy.ts b/packages/ui/src/lazy.ts
index 661d33de1d..4fcdcd9480 100644
--- a/packages/ui/src/lazy.ts
+++ b/packages/ui/src/lazy.ts
@@ -7,7 +7,6 @@ const delayedCaller = new DelayedCaller(5)
 function makeObserver (rootMargin: string): IntersectionObserver {
   const entriesPending = new Map<Element, { isIntersecting: boolean }>()
   const notifyObservers = (observer: IntersectionObserver): void => {
-    console.log('notifyObservers', entriesPending.size)
     for (const [target, entry] of entriesPending.entries()) {
       const entryData = entryMap.get(target)
       if (entryData == null) {
@@ -69,12 +68,26 @@ export function lazyObserver (node: Element, onVisible: (value: boolean, unsubsc
     return {}
   }
 
-  const destroy = listen('20%', node, (isIntersecting) => {
-    visible = isIntersecting
-    onVisible(visible, destroy)
-  })
+  let needsUpdate = true
+  let destroy = (): void => {}
+  // we need this update function to re-trigger observer for moved elements
+  // moved elements are relevant because onVisible can have side effects
+  const update = (): void => {
+    if (!needsUpdate) {
+      return
+    }
+    needsUpdate = false
+    destroy()
+    destroy = listen('20%', node, (isIntersecting) => {
+      visible = isIntersecting
+      needsUpdate = visible
+      onVisible(visible, destroy)
+    })
+  }
+  update()
 
   return {
-    destroy
+    destroy,
+    update
   }
 }