fix: delay resize observer handling

petyosi · Mar 29, 2024 · 1f8c8ee · 1f8c8ee
1 parent 9372b9a
commit 1f8c8ee
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/hooks/useSize.ts b/src/hooks/useSize.ts
@@ -14,7 +14,9 @@ export function useSizeWithElRef(callback: (e: HTMLElement) => void, enabled = t
       return new ResizeObserver((entries: ResizeObserverEntry[]) => {
         const element = entries[0].target as HTMLElement
         if (element.offsetParent !== null) {
-          callback(element)
+          requestAnimationFrame(() => {
+            callback(element)
+          })
         }
       })
     }, [callback])

diff --git a/src/hooks/useWindowViewportRect.ts b/src/hooks/useWindowViewportRect.ts
@@ -45,7 +45,9 @@ export default function useWindowViewportRectRef(callback: (info: WindowViewport
   React.useEffect(() => {
     if (customScrollParent) {
       customScrollParent.addEventListener('scroll', scrollAndResizeEventHandler)
-      const observer = new ResizeObserver(scrollAndResizeEventHandler)
+      const observer = new ResizeObserver(() => {
+        requestAnimationFrame(scrollAndResizeEventHandler)
+      })
       observer.observe(customScrollParent)
       return () => {
         customScrollParent.removeEventListener('scroll', scrollAndResizeEventHandler)