292362135d
This commit addresses failures in end-to-end tests that occurred due to
`ResizeObserver` loop limit exceptions.
These errors were triggered by Vue dependency upgrades in the commit
aae5434451.
The errors had the following message:
> `ResizeObserver loop completed with undelivered notifications`
This error happens when there are too many observations and the observer
is not able to deliver all observations within a single animation frame.
See: WICG/resize-observer#38
his commit resolves the issue by controlling how many observations are
delivered per animation frame and limiting it to only one.
It improves performance by reducing layout trashing, improving frame
rates, and managing resources more effectively.
Changes:
- Introduce an animation frame control to manage observations more
efficiently.
- Centralized `ResizeObserver` management within the `UseResizeObserver`
hook to improve consistency and reuse across the application.
68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
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;
|