From b09784a071e8bd08b451ad0601b3675bd17338e7 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Fri, 7 Feb 2025 12:41:17 +0100
Subject: [PATCH] feat: add useAnimationFrameWithResizeObserver option

---
 docs/api/virtualizer.md            | 10 ++++++++++
 packages/virtual-core/src/index.ts | 29 +++++++++++++++++++++--------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/docs/api/virtualizer.md b/docs/api/virtualizer.md
index d49619a81..e00ed8bf5 100644
--- a/docs/api/virtualizer.md
+++ b/docs/api/virtualizer.md
@@ -258,6 +258,16 @@ isRtl: boolean
 
 Whether to invert horizontal scrolling to support right-to-left language locales.
 
+### `useAnimationFrameWithResizeObserver`
+
+```tsx
+useAnimationFrameWithResizeObserver: boolean
+```
+
+This option enables wrapping ResizeObserver measurements in requestAnimationFrame for smoother updates and reduced layout thrashing. The default value is `false`. 
+
+It helps prevent the "ResizeObserver loop completed with undelivered notifications" error by ensuring that measurements align with the rendering cycle. This can improve performance and reduce UI jitter, especially when resizing elements dynamically. However, since ResizeObserver already runs asynchronously, adding requestAnimationFrame may introduce a slight delay in measurements, which could be noticeable in some cases. If resizing operations are lightweight and do not cause reflows, enabling this option may not provide significant benefits.
+
 ## Virtualizer Instance
 
 The following properties and methods are available on the virtualizer instance:
diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts
index 8bad751d4..779247e1c 100644
--- a/packages/virtual-core/src/index.ts
+++ b/packages/virtual-core/src/index.ts
@@ -84,15 +84,21 @@ export const observeElementRect = <T extends Element>(
   }
 
   const observer = new targetWindow.ResizeObserver((entries) => {
-    const entry = entries[0]
-    if (entry?.borderBoxSize) {
-      const box = entry.borderBoxSize[0]
-      if (box) {
-        handler({ width: box.inlineSize, height: box.blockSize })
-        return
+    const run = () => {
+      const entry = entries[0]
+      if (entry?.borderBoxSize) {
+        const box = entry.borderBoxSize[0]
+        if (box) {
+          handler({ width: box.inlineSize, height: box.blockSize })
+          return
+        }
       }
+      handler(element.getBoundingClientRect())
     }
-    handler(element.getBoundingClientRect())
+
+    instance.options.useAnimationFrameWithResizeObserver
+      ? requestAnimationFrame(run)
+      : run()
   })
 
   observer.observe(element, { box: 'border-box' })
@@ -337,6 +343,7 @@ export interface VirtualizerOptions<
   useScrollendEvent?: boolean
   enabled?: boolean
   isRtl?: boolean
+  useAnimationFrameWithResizeObserver?: boolean
 }
 
 export class Virtualizer<
@@ -378,7 +385,12 @@ export class Virtualizer<
 
       return (_ro = new this.targetWindow.ResizeObserver((entries) => {
         entries.forEach((entry) => {
-          this._measureElement(entry.target as TItemElement, entry)
+          const run = () => {
+            this._measureElement(entry.target as TItemElement, entry)
+          }
+          this.options.useAnimationFrameWithResizeObserver
+            ? requestAnimationFrame(run)
+            : run()
         })
       }))
     }
@@ -427,6 +439,7 @@ export class Virtualizer<
       enabled: true,
       isRtl: false,
       useScrollendEvent: true,
+      useAnimationFrameWithResizeObserver: false,
       ...opts,
     }
   }