fix(core): avoid occasional "ResizeObserver loop" error (#1466)

This error is hard to reproduce, but it's a straightforward workaround
to make sure the observer doesn't try to update when it can't within
the given frame.

Co-authored-by: Sam Jones <[email protected]>

packages/core/src/hooks/useMeasure.js

@@ -3,20 +3,35 @@ import ResizeObserver from 'resize-observer-polyfill'
 
 export const useMeasure = () => {
     const measureRef = useRef(null)
+    const animationFrameId = useRef(null)
     const [bounds, setBounds] = useState({
         left: 0,
         top: 0,
         width: 0,
         height: 0,
     })
-    const [observer] = useState(() => new ResizeObserver(([entry]) => setBounds(entry.contentRect)))
+    const [observer] = useState(
+        () =>
+            new ResizeObserver(([entry]) => {
+                // wrap this call in requestAnimationFrame to avoid "Resize Observer loop limit exceeded"
+                // error in certain situations
+                animationFrameId.current = requestAnimationFrame(() => {
+                    setBounds(entry.contentRect)
+                })
+            })
+    )
 
     useEffect(() => {
         if (measureRef.current) {
             observer.observe(measureRef.current)
         }
 
-        return () => observer.disconnect()
+        return () => {
+            if (animationFrameId.current) {
+                cancelAnimationFrame(animationFrameId.current)
+            }
+            observer.disconnect()
+        }
     }, [])
 
     return [measureRef, bounds]