diff --git a/src/application/Common/Timing/Throttle.ts b/src/application/Common/Timing/Throttle.ts
index da3bb732..fa95d087 100644
--- a/src/application/Common/Timing/Throttle.ts
+++ b/src/application/Common/Timing/Throttle.ts
@@ -15,18 +15,26 @@ const DefaultOptions: ThrottleOptions = {
   timer: PlatformTimer,
 };
 
-export function throttle(
+export interface ThrottleFunction {
+  (
+    callback: CallbackType,
+    waitInMs: number,
+    options?: Partial<ThrottleOptions>,
+  ): CallbackType;
+}
+
+export const throttle: ThrottleFunction = (
   callback: CallbackType,
   waitInMs: number,
   options: Partial<ThrottleOptions> = DefaultOptions,
-): CallbackType {
+): CallbackType => {
   const defaultedOptions: ThrottleOptions = {
     ...DefaultOptions,
     ...options,
   };
   const throttler = new Throttler(waitInMs, callback, defaultedOptions);
   return (...args: unknown[]) => throttler.invoke(...args);
-}
+};
 
 class Throttler {
   private lastExecutionTime: number | null = null;
diff --git a/src/presentation/components/DevToolkit/UseScrollbarGutterWidth.ts b/src/presentation/components/DevToolkit/UseScrollbarGutterWidth.ts
index 18046699..b96e8f52 100644
--- a/src/presentation/components/DevToolkit/UseScrollbarGutterWidth.ts
+++ b/src/presentation/components/DevToolkit/UseScrollbarGutterWidth.ts
@@ -1,8 +1,9 @@
 import {
-  computed, readonly, ref, watch,
+  computed, readonly, ref, shallowRef, watch,
 } from 'vue';
 import { throttle } from '@/application/Common/Timing/Throttle';
 import { useAutoUnsubscribedEventListener } from '../Shared/Hooks/UseAutoUnsubscribedEventListener';
+import { useResizeObserver } from '../Shared/Hooks/Resize/UseResizeObserver';
 
 const RESIZE_EVENT_THROTTLE_MS = 200;
 
@@ -29,11 +30,17 @@ function getScrollbarGutterWidth(): number {
 
 function useBodyWidth() {
   const width = ref(document.body.offsetWidth);
-  const observer = new ResizeObserver((entries) => throttle(() => {
-    for (const entry of entries) {
-      width.value = entry.borderBoxSize[0].inlineSize;
-    }
-  }, RESIZE_EVENT_THROTTLE_MS));
-  observer.observe(document.body, { box: 'border-box' });
+  useResizeObserver(
+    {
+      observedElementRef: shallowRef(document.body),
+      throttleInMs: RESIZE_EVENT_THROTTLE_MS,
+      observeCallback: (entries) => {
+        for (const entry of entries) {
+          width.value = entry.borderBoxSize[0].inlineSize;
+        }
+      },
+      observeOptions: { box: 'border-box' },
+    },
+  );
   return readonly(width);
 }
diff --git a/src/presentation/components/Shared/Hooks/Resize/UseAnimationFrameLimiter.ts b/src/presentation/components/Shared/Hooks/Resize/UseAnimationFrameLimiter.ts
new file mode 100644
index 00000000..92f1aff4
--- /dev/null
+++ b/src/presentation/components/Shared/Hooks/Resize/UseAnimationFrameLimiter.ts
@@ -0,0 +1,41 @@
+import { onBeforeUnmount } from 'vue';
+
+export function useAnimationFrameLimiter(
+  cancelAnimationFrame: CancelAnimationFrameFunction = window.cancelAnimationFrame,
+  requestAnimationFrame: RequestAnimationFrameFunction = window.requestAnimationFrame,
+  onTeardown: RegisterTeardownCallbackFunction = onBeforeUnmount,
+): AnimationFrameLimiter {
+  let requestId: AnimationFrameId | null = null;
+  const cancelNextFrame = () => {
+    if (requestId === null) {
+      return;
+    }
+    cancelAnimationFrame(requestId);
+  };
+  const resetNextFrame = (callback: AnimationFrameRequestCallback) => {
+    cancelNextFrame();
+    requestId = requestAnimationFrame(callback);
+  };
+  onTeardown(() => {
+    cancelNextFrame();
+  });
+  return {
+    cancelNextFrame,
+    resetNextFrame,
+  };
+}
+
+export type CancelAnimationFrameFunction = typeof window.cancelAnimationFrame;
+
+export type RequestAnimationFrameFunction = (callback: AnimationFrameRequestCallback) => number;
+
+export type RegisterTeardownCallbackFunction = (callback: () => void) => void;
+
+export type AnimationFrameId = ReturnType<typeof requestAnimationFrame>;
+
+export type AnimationFrameRequestCallback = () => void;
+
+export interface AnimationFrameLimiter {
+  cancelNextFrame(): void;
+  resetNextFrame(callback: AnimationFrameRequestCallback): void;
+}
diff --git a/src/presentation/components/Shared/Hooks/Resize/UseResizeObserver.ts b/src/presentation/components/Shared/Hooks/Resize/UseResizeObserver.ts
new file mode 100644
index 00000000..0ee22f8b
--- /dev/null
+++ b/src/presentation/components/Shared/Hooks/Resize/UseResizeObserver.ts
@@ -0,0 +1,67 @@
+import {
+  onBeforeMount, onBeforeUnmount,
+  watch, type Ref,
+} from 'vue';
+import { throttle, type ThrottleFunction } from '@/application/Common/Timing/Throttle';
+import { useResizeObserverPolyfill } from './UseResizeObserverPolyfill';
+import { useAnimationFrameLimiter } from './UseAnimationFrameLimiter';
+
+export function useResizeObserver(
+  config: ResizeObserverConfig,
+  usePolyfill = useResizeObserverPolyfill,
+  useFrameLimiter = useAnimationFrameLimiter,
+  throttler: ThrottleFunction = throttle,
+  onSetup: LifecycleHookRegistration = onBeforeMount,
+  onTeardown: LifecycleHookRegistration = onBeforeUnmount,
+) {
+  const { resetNextFrame, cancelNextFrame } = useFrameLimiter();
+  // This prevents the 'ResizeObserver loop completed with undelivered notifications' error when
+  // the browser can't process all observations within one animation frame.
+  // Reference: https://github.com/WICG/resize-observer/issues/38
+
+  const { resizeObserverReady } = usePolyfill();
+  // This ensures compatibility with ancient browsers. All modern browsers support ResizeObserver.
+  // Compatibility info: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility
+
+  const throttledCallback = throttler(config.observeCallback, config.throttleInMs);
+  // Throttling enhances performance during rapid changes such as window resizing.
+
+  let observer: ResizeObserver | null;
+
+  const disposeObserver = () => {
+    cancelNextFrame();
+    observer?.disconnect();
+    observer = null;
+  };
+
+  onSetup(() => {
+    watch(() => config.observedElementRef.value, (element) => {
+      if (!element) {
+        disposeObserver();
+        return;
+      }
+      resizeObserverReady.then((createObserver) => {
+        disposeObserver();
+        observer = createObserver((...args) => {
+          resetNextFrame(() => throttledCallback(...args));
+        });
+        observer.observe(element, config?.observeOptions);
+      });
+    }, { immediate: true });
+  });
+
+  onTeardown(() => {
+    disposeObserver();
+  });
+}
+
+export interface ResizeObserverConfig {
+  readonly observedElementRef: ObservedElementReference;
+  readonly throttleInMs: number;
+  readonly observeCallback: ResizeObserverCallback;
+  readonly observeOptions?: ResizeObserverOptions;
+}
+
+export type ObservedElementReference = Readonly<Ref<HTMLElement | undefined>>;
+
+export type LifecycleHookRegistration = (callback: () => void) => void;
diff --git a/src/presentation/components/Shared/Hooks/UseResizeObserverPolyfill.ts b/src/presentation/components/Shared/Hooks/Resize/UseResizeObserverPolyfill.ts
similarity index 75%
rename from src/presentation/components/Shared/Hooks/UseResizeObserverPolyfill.ts
rename to src/presentation/components/Shared/Hooks/Resize/UseResizeObserverPolyfill.ts
index 738dadc4..ab3819b5 100644
--- a/src/presentation/components/Shared/Hooks/UseResizeObserverPolyfill.ts
+++ b/src/presentation/components/Shared/Hooks/Resize/UseResizeObserverPolyfill.ts
@@ -16,11 +16,17 @@ async function polyfillResizeObserver(): Promise<typeof ResizeObserver> {
   return polyfillLoader.getValue();
 }
 
+interface ResizeObserverCreator {
+  (
+    ...args: ConstructorParameters<typeof ResizeObserver>
+  ): ResizeObserver;
+}
+
 export function useResizeObserverPolyfill() {
-  const resizeObserverReady = new Promise<void>((resolve) => {
+  const resizeObserverReady = new Promise<ResizeObserverCreator>((resolve) => {
     onMounted(async () => {
       await polyfillResizeObserver();
-      resolve();
+      resolve((args) => new ResizeObserver(args));
     });
   });
   return { resizeObserverReady };
diff --git a/src/presentation/components/Shared/SizeObserver.vue b/src/presentation/components/Shared/SizeObserver.vue
index 593da74d..ef4eeae6 100644
--- a/src/presentation/components/Shared/SizeObserver.vue
+++ b/src/presentation/components/Shared/SizeObserver.vue
@@ -6,10 +6,9 @@
 
 <script lang="ts">
 import {
-  defineComponent, shallowRef, onMounted, onBeforeUnmount, watch,
+  defineComponent, shallowRef, onMounted, watch,
 } from 'vue';
-import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
-import { throttle } from '@/application/Common/Timing/Throttle';
+import { useResizeObserver } from './Hooks/Resize/UseResizeObserver';
 
 export default defineComponent({
   emits: {
@@ -20,31 +19,21 @@ export default defineComponent({
     /* eslint-enable @typescript-eslint/no-unused-vars */
   },
   setup(_, { emit }) {
-    const { resizeObserverReady } = useResizeObserverPolyfill();
-
     const containerElement = shallowRef<HTMLElement>();
 
     let width = 0;
     let height = 0;
-    let observer: ResizeObserver | undefined;
 
-    onMounted(() => {
-      watch(() => containerElement.value, async (element) => {
-        if (!element) {
-          disposeObserver();
-          return;
-        }
-        resizeObserverReady.then(() => {
-          disposeObserver();
-          observer = new ResizeObserver(throttle(updateSize, 200));
-          observer.observe(element);
-        });
-        updateSize(); // Do not throttle, immediately inform new width
-      }, { immediate: true });
+    useResizeObserver({
+      observedElementRef: containerElement,
+      observeCallback: updateSize,
+      throttleInMs: 200,
     });
 
-    onBeforeUnmount(() => {
-      disposeObserver();
+    onMounted(() => {
+      watch(() => containerElement.value, async () => {
+        updateSize();
+      }, { immediate: true });
     });
 
     function updateSize() {
@@ -81,11 +70,6 @@ export default defineComponent({
       return { isChanged: true };
     }
 
-    function disposeObserver() {
-      observer?.disconnect();
-      observer = undefined;
-    }
-
     return {
       containerElement,
     };
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
index 6ee1f2d7..e44b43f5 100644
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -34,7 +34,7 @@ import {
   useFloating, arrow, shift, flip, type Placement, offset, type Side, type Coords, autoUpdate,
 } from '@floating-ui/vue';
 import { defineComponent, shallowRef, computed } from 'vue';
-import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
+import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/Resize/UseResizeObserverPolyfill';
 import { throttle } from '@/application/Common/Timing/Throttle';
 import { type TargetEventListener } from '@/presentation/components/Shared/Hooks/UseAutoUnsubscribedEventListener';
 import { injectKey } from '@/presentation/injectionSymbols';
diff --git a/tests/unit/application/Common/Timing/Throttle.spec.ts b/tests/unit/application/Common/Timing/Throttle.spec.ts
index 9a1dede3..9ce812e9 100644
--- a/tests/unit/application/Common/Timing/Throttle.spec.ts
+++ b/tests/unit/application/Common/Timing/Throttle.spec.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { TimerStub } from '@tests/unit/shared/Stubs/TimerStub';
-import { throttle, type ThrottleOptions } from '@/application/Common/Timing/Throttle';
+import { throttle, type ThrottleFunction, type ThrottleOptions } from '@/application/Common/Timing/Throttle';
 import type { Timer } from '@/application/Common/Timing/Timer';
 import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
 
@@ -275,7 +275,7 @@ describe('throttle', () => {
   });
 });
 
-type CallbackType = Parameters<typeof throttle>[0];
+type CallbackType = Parameters<ThrottleFunction>[0];
 
 class TestContext {
   private options: Partial<ThrottleOptions> | undefined = {
@@ -315,7 +315,7 @@ class TestContext {
     return this;
   }
 
-  public throttle(): ReturnType<typeof throttle> {
+  public throttle(): ReturnType<ThrottleFunction> {
     return throttle(
       this.callback,
       this.waitInMs,
diff --git a/tests/unit/presentation/components/Scripts/Slider/UseDragHandler.spec.ts b/tests/unit/presentation/components/Scripts/Slider/UseDragHandler.spec.ts
index 1725ef9e..b06bdd98 100644
--- a/tests/unit/presentation/components/Scripts/Slider/UseDragHandler.spec.ts
+++ b/tests/unit/presentation/components/Scripts/Slider/UseDragHandler.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { ref, type Ref } from 'vue';
 import { useDragHandler, type DragDomModifier } from '@/presentation/components/Scripts/Slider/UseDragHandler';
 import { ThrottleStub } from '@tests/unit/shared/Stubs/ThrottleStub';
-import { throttle } from '@/application/Common/Timing/Throttle';
+import { type ThrottleFunction } from '@/application/Common/Timing/Throttle';
 import type { ConstructorArguments } from '@/TypeHelpers';
 
 describe('useDragHandler', () => {
@@ -235,7 +235,7 @@ describe('useDragHandler', () => {
 function initializeDragHandlerWithMocks(mocks?: {
   readonly dragDomModifier?: DragDomModifier;
   readonly draggableElementRef?: Ref<HTMLElement>;
-  readonly throttler?: typeof throttle,
+  readonly throttler?: ThrottleFunction,
 }) {
   return useDragHandler(
     mocks?.draggableElementRef ?? ref(document.createElement('div')),
diff --git a/tests/unit/presentation/components/Shared/Resize/UseAnimationFrameLimiter.spec.ts b/tests/unit/presentation/components/Shared/Resize/UseAnimationFrameLimiter.spec.ts
new file mode 100644
index 00000000..d58256fc
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Resize/UseAnimationFrameLimiter.spec.ts
@@ -0,0 +1,133 @@
+import { describe, it, expect } from 'vitest';
+import {
+  useAnimationFrameLimiter, type AnimationFrameId, type AnimationFrameRequestCallback,
+  type CancelAnimationFrameFunction, type RegisterTeardownCallbackFunction,
+  type RequestAnimationFrameFunction,
+} from '@/presentation/components/Shared/Hooks/Resize/UseAnimationFrameLimiter';
+import { expectExists } from '@tests/shared/Assertions/ExpectExists';
+
+describe('useAnimationFrameLimiter', () => {
+  describe('resetNextFrame', () => {
+    it('schedules the callback in the next animation frame', () => {
+      // arrange
+      const expectedCallback = () => {};
+      let scheduledCallback: AnimationFrameRequestCallback | undefined;
+      const requestAnimationFrame: RequestAnimationFrameFunction = (callback) => {
+        scheduledCallback = callback;
+        return 0;
+      };
+      const context = new TestContext()
+        .withRequestAnimationFrameFunction(requestAnimationFrame);
+      // act
+      const { resetNextFrame } = context.useAnimationFrameLimiter();
+      resetNextFrame(expectedCallback);
+      // assert
+      expect(scheduledCallback).to.equal(expectedCallback);
+    });
+    it('cancels the existing animation frame before scheduling a new one', () => {
+      // arrange
+      const expectedCancelledAnimationFrameId: AnimationFrameId = 5;
+      let actualCancelledAnimationFrameId: AnimationFrameId | undefined;
+      const requestAnimationFrame: RequestAnimationFrameFunction = () => {
+        return expectedCancelledAnimationFrameId;
+      };
+      const cancelAnimationFrame: CancelAnimationFrameFunction = (animationFrameId) => {
+        actualCancelledAnimationFrameId = animationFrameId;
+      };
+      const context = new TestContext()
+        .withRequestAnimationFrameFunction(requestAnimationFrame)
+        .withCancelAnimationFrame(cancelAnimationFrame);
+      // act
+      const { resetNextFrame } = context.useAnimationFrameLimiter();
+      resetNextFrame(() => {}); // Nothing to cancel in first call
+      resetNextFrame(() => {});
+      // assert
+      expect(actualCancelledAnimationFrameId).to.equal(expectedCancelledAnimationFrameId);
+    });
+  });
+  describe('cancelNextFrame', () => {
+    it('cancels the scheduled animation frame if one exists', () => {
+      // arrange
+      const expectedCancelledAnimationFrameId: AnimationFrameId = 5;
+      let actualCancelledAnimationFrameId: AnimationFrameId | undefined;
+      const requestAnimationFrame: RequestAnimationFrameFunction = () => {
+        return expectedCancelledAnimationFrameId;
+      };
+      const cancelAnimationFrame: CancelAnimationFrameFunction = (animationFrameId) => {
+        actualCancelledAnimationFrameId = animationFrameId;
+      };
+      const context = new TestContext()
+        .withRequestAnimationFrameFunction(requestAnimationFrame)
+        .withCancelAnimationFrame(cancelAnimationFrame);
+      // act
+      const { resetNextFrame, cancelNextFrame } = context.useAnimationFrameLimiter();
+      resetNextFrame(() => {}); // Schedule the initial one
+      cancelNextFrame();
+      // assert
+      expect(actualCancelledAnimationFrameId).to.equal(expectedCancelledAnimationFrameId);
+    });
+  });
+  it('automatically cancels the animation frame on cleanup', () => {
+    // arrange
+    let actualCancelledAnimationFrameId: AnimationFrameId | undefined;
+    let actualCleanupCallback: (() => void) | undefined;
+    const onTeardownCallback: RegisterTeardownCallbackFunction = (cleanupCallback) => {
+      actualCleanupCallback = cleanupCallback;
+    };
+    const expectedCancelledAnimationFrameId: AnimationFrameId = 5;
+    const requestAnimationFrame: RequestAnimationFrameFunction = () => {
+      return expectedCancelledAnimationFrameId;
+    };
+    const cancelAnimationFrame: CancelAnimationFrameFunction = (animationFrameId) => {
+      actualCancelledAnimationFrameId = animationFrameId;
+    };
+    const testContext = new TestContext()
+      .withOnTeardownCallback(onTeardownCallback)
+      .withRequestAnimationFrameFunction(requestAnimationFrame)
+      .withCancelAnimationFrame(cancelAnimationFrame);
+    // act
+    const { resetNextFrame } = testContext.useAnimationFrameLimiter();
+    resetNextFrame(() => {}); // Schedule the initial one
+    // assert
+    expectExists(actualCleanupCallback);
+    actualCleanupCallback();
+    expect(actualCancelledAnimationFrameId).to.equal(expectedCancelledAnimationFrameId);
+  });
+});
+
+class TestContext {
+  private cancelAnimationFrame: CancelAnimationFrameFunction = () => {};
+
+  private requestAnimationFrameFunction: RequestAnimationFrameFunction = () => Math.random();
+
+  private onTeardownCallback: RegisterTeardownCallbackFunction = () => {};
+
+  public withRequestAnimationFrameFunction(
+    requestAnimationFrameFunction: RequestAnimationFrameFunction,
+  ): this {
+    this.requestAnimationFrameFunction = requestAnimationFrameFunction;
+    return this;
+  }
+
+  public withCancelAnimationFrame(
+    cancelAnimationFrame: CancelAnimationFrameFunction,
+  ): this {
+    this.cancelAnimationFrame = cancelAnimationFrame;
+    return this;
+  }
+
+  public withOnTeardownCallback(
+    registerCleanupCallback: RegisterTeardownCallbackFunction,
+  ): this {
+    this.onTeardownCallback = registerCleanupCallback;
+    return this;
+  }
+
+  public useAnimationFrameLimiter(): ReturnType<typeof useAnimationFrameLimiter> {
+    return useAnimationFrameLimiter(
+      this.cancelAnimationFrame,
+      this.requestAnimationFrameFunction,
+      this.onTeardownCallback,
+    );
+  }
+}
diff --git a/tests/unit/presentation/components/Shared/Resize/UseResizeObserver.spec.ts b/tests/unit/presentation/components/Shared/Resize/UseResizeObserver.spec.ts
new file mode 100644
index 00000000..c1abcdb4
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Resize/UseResizeObserver.spec.ts
@@ -0,0 +1,117 @@
+import { shallowRef } from 'vue';
+import { useResizeObserver, type LifecycleHookRegistration, type ObservedElementReference } from '@/presentation/components/Shared/Hooks/Resize/UseResizeObserver';
+import { flushPromiseResolutionQueue } from '@tests/unit/shared/PromiseInspection';
+import type { AnimationFrameLimiter } from '@/presentation/components/Shared/Hooks/Resize/UseAnimationFrameLimiter';
+import { ThrottleStub } from '@tests/unit/shared/Stubs/ThrottleStub';
+import { expectExists } from '@tests/shared/Assertions/ExpectExists';
+
+describe('UseResizeObserver', () => {
+  it('registers observer once mounted', async () => {
+    // arrange
+    let registeredElement: Element | null = null;
+    const expectedElement = document.createElement('div');
+    const resizeObserverStub = createResizeObserverStub();
+    resizeObserverStub.observe = (element) => {
+      registeredElement = element;
+    };
+    // act
+    new TestContext()
+      .withObservedElementRef(shallowRef(expectedElement))
+      .withResizeObserver(resizeObserverStub)
+      .useResizeObserver();
+    await flushPromiseResolutionQueue();
+    // assert
+    expect(registeredElement).to.equal(expectedElement);
+  });
+  it('disposes observer once unmounted', async () => {
+    // arrange
+    let isObserverDisconnected = false;
+    const resizeObserverStub = createResizeObserverStub();
+    resizeObserverStub.disconnect = () => {
+      isObserverDisconnected = true;
+    };
+    let teardownCallback: (() => void) | undefined;
+    // act
+    new TestContext()
+      .withResizeObserver(resizeObserverStub)
+      .withOnTeardown((callback) => {
+        teardownCallback = callback;
+      })
+      .useResizeObserver();
+    await flushPromiseResolutionQueue();
+    expectExists(teardownCallback);
+    teardownCallback();
+    // assert
+    expect(isObserverDisconnected).to.equal(true);
+  });
+});
+
+function createResizeObserverStub(): ResizeObserver {
+  return {
+    disconnect: () => {},
+    observe: () => {},
+    unobserve: () => {},
+  };
+}
+
+function createFrameLimiterStub(): AnimationFrameLimiter {
+  return {
+    cancelNextFrame: () => {},
+    resetNextFrame: (callback) => { callback(); },
+  };
+}
+
+class TestContext {
+  private resizeObserver: ResizeObserver = createResizeObserverStub();
+
+  private observedElementRef: ObservedElementReference = shallowRef(document.createElement('div'));
+
+  private onSetup: LifecycleHookRegistration = (callback) => { callback(); };
+
+  private onTeardown: LifecycleHookRegistration = () => { };
+
+  public withResizeObserver(resizeObserver: ResizeObserver): this {
+    this.resizeObserver = resizeObserver;
+    return this;
+  }
+
+  public withObservedElementRef(observedElementRef: ObservedElementReference): this {
+    this.observedElementRef = observedElementRef;
+    return this;
+  }
+
+  public withOnSetup(onSetup: LifecycleHookRegistration): this {
+    this.onSetup = onSetup;
+    return this;
+  }
+
+  public withOnTeardown(onTeardown: LifecycleHookRegistration): this {
+    this.onTeardown = onTeardown;
+    return this;
+  }
+
+  public useResizeObserver() {
+    return useResizeObserver(
+      ...this.buildParameters(),
+    );
+  }
+
+  private buildParameters(): Parameters<typeof useResizeObserver> {
+    return [
+      {
+        observedElementRef: this.observedElementRef,
+        throttleInMs: 50,
+        observeCallback: () => {},
+      },
+      () => ({
+        resizeObserverReady: Promise.resolve(() => this.resizeObserver),
+      }),
+      () => createFrameLimiterStub(),
+      new ThrottleStub()
+        .withImmediateExecution(true)
+        .func,
+      this.onSetup,
+      this.onTeardown,
+    ];
+  }
+}
diff --git a/tests/unit/shared/Stubs/ThrottleStub.ts b/tests/unit/shared/Stubs/ThrottleStub.ts
index 02dee4a5..53f0bf80 100644
--- a/tests/unit/shared/Stubs/ThrottleStub.ts
+++ b/tests/unit/shared/Stubs/ThrottleStub.ts
@@ -1,13 +1,13 @@
-import type { CallbackType, throttle } from '@/application/Common/Timing/Throttle';
+import type { CallbackType, ThrottleFunction } from '@/application/Common/Timing/Throttle';
 
 export class ThrottleStub {
-  public readonly throttleInitializationCallArgs: Array<Parameters<typeof throttle>> = [];
+  public readonly throttleInitializationCallArgs: Array<Parameters<ThrottleFunction>> = [];
 
   public readonly throttledFunctionCallArgs = new Array<readonly unknown[]>();
 
   private executeImmediately: boolean = false;
 
-  public func = (callback: CallbackType, waitInMs: number): ReturnType<typeof throttle> => {
+  public func = (callback: CallbackType, waitInMs: number): ReturnType<ThrottleFunction> => {
     this.throttleInitializationCallArgs.push([callback, waitInMs]);
     return (...args: readonly unknown[]) => {
       this.throttledFunctionCallArgs.push([...args]);