bf3426f91b
This commit fixes layout shifts that occur on card list part of the page when the page is initially loaded. - Resolve issue where card list starts with minimal width, leading to jumps in UI until correct width is calculated on medium and big screens. - Dispose of existing `ResizeObserver` properly before creating a new one. This prevents leaks and incorrect width calculations if `containerElement` changes. - Throttle resize events to minimize width/height calculation changes, enhancing performance and reducing the chances for layout shifts. Supporting CI/CD improvements: - Enable artifact upload in CI/CD even if E2E tests fail. - Distinguish uploaded artifacts by operating system for clarity.
28 lines
778 B
TypeScript
28 lines
778 B
TypeScript
import { defineComponent, ref, watch } from 'vue';
|
|
import type { Ref } from 'vue';
|
|
|
|
const COMPONENT_SIZE_OBSERVER_NAME = 'SizeObserver';
|
|
|
|
export function createSizeObserverStub(
|
|
widthRef: Readonly<Ref<number>> = ref(500),
|
|
) {
|
|
const component = defineComponent({
|
|
name: COMPONENT_SIZE_OBSERVER_NAME,
|
|
template: `<div id="${COMPONENT_SIZE_OBSERVER_NAME}-stub"><slot /></div>`,
|
|
emits: {
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
widthChanged: (newWidth: number) => true,
|
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
},
|
|
setup: (_, { emit }) => {
|
|
watch(widthRef, (newValue) => {
|
|
emit('widthChanged', newValue);
|
|
});
|
|
},
|
|
});
|
|
return {
|
|
name: COMPONENT_SIZE_OBSERVER_NAME,
|
|
component,
|
|
};
|
|
}
|