Fix card list UI layout shifts (jumps) on load
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.
This commit is contained in:
@@ -9,6 +9,7 @@ import {
|
||||
defineComponent, shallowRef, onMounted, onBeforeUnmount, watch,
|
||||
} from 'vue';
|
||||
import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
|
||||
import { throttle } from '@/presentation/components/Shared/Throttle';
|
||||
|
||||
export default defineComponent({
|
||||
emits: {
|
||||
@@ -34,10 +35,11 @@ export default defineComponent({
|
||||
return;
|
||||
}
|
||||
resizeObserverReady.then(() => {
|
||||
observer = new ResizeObserver(updateSize);
|
||||
disposeObserver();
|
||||
observer = new ResizeObserver(throttle(updateSize, 200));
|
||||
observer.observe(element);
|
||||
});
|
||||
updateSize();
|
||||
updateSize(); // Do not throttle, immediately inform new width
|
||||
}, { immediate: true });
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user