feat(useElementBounding): add updateTiming option (#3869)

DerZade · antfu · web-flow · commit 0fa179ecbfa0 · 2024-07-17T14:02:37.000Z
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/core/useElementBounding/index.ts b/packages/core/useElementBounding/index.ts
@@ -33,6 +33,16 @@ export interface UseElementBoundingOptions {
    * @default true
    */
   immediate?: boolean
+
+  /**
+   * Timing to recalculate the bounding box
+   *
+   * Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}
+   * and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.
+   *
+   * @default 'sync'
+   */
+  updateTiming?: 'sync' | 'next-frame'
 }
 
 /**
@@ -50,6 +60,7 @@ export function useElementBounding(
     windowResize = true,
     windowScroll = true,
     immediate = true,
+    updateTiming = 'sync',
   } = options
 
   const height = ref(0)
@@ -61,7 +72,7 @@ export function useElementBounding(
   const x = ref(0)
   const y = ref(0)
 
-  function update() {
+  function recalculate() {
     const el = unrefElement(target)
 
     if (!el) {
@@ -90,6 +101,13 @@ export function useElementBounding(
     y.value = rect.y
   }
 
+  function update() {
+    if (updateTiming === 'sync')
+      recalculate()
+    else if (updateTiming === 'next-frame')
+      requestAnimationFrame(() => recalculate())
+  }
+
   useResizeObserver(target, update)
   watch(() => unrefElement(target), ele => !ele && update())
   // trigger by css or style
