Merge pull request #1060 from writer/AB-211

fix(ui): use lazy loader for dropdown - AB-211

Author: madeindjs

src/ui/src/components/shared/SharedLazyLoader.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+/**
+ * This component will avoid render the slot "content" until it's visible (relying on `IntersectionObserver`)
+ */
+import { onUnmounted, ref, useTemplateRef, watch } from "vue";
+
+const container = useTemplateRef("container");
+const isVisible = ref(false);
+const currentObserver = ref<IntersectionObserver | undefined>();
+
+function observeVisibility(element: Element) {
+	// close the old IntersectionObserver if exists
+	currentObserver.value?.disconnect();
+
+	const observer = new IntersectionObserver((entries) => {
+		// check if any observed elements are visible
+		const visible = entries.some((entry) => entry.isIntersecting);
+		if (!visible) return;
+
+		// the element is visible, we don't need the observer anymore
+		observer.unobserve(element);
+		isVisible.value = true;
+	});
+
+	// observe the element and save the observer to close it if necessary
+	observer.observe(element);
+	currentObserver.value = observer;
+}
+
+watch(
+	container,
+	() => {
+		// handle if the browser doesn't support IntersectionObserver
+		if (!window.IntersectionObserver) return (isVisible.value = true);
+		// if HTML ref exists, start to observe visibility
+		if (container.value) observeVisibility(container.value);
+	},
+	{ immediate: true },
+);
+
+// be sure to close IntersectionObserver if component is destroyed
+onUnmounted(() => currentObserver.value?.disconnect());
+</script>
+
+<template>
+	<div ref="container" class="SharedLazyLoader">
+		<slot v-if="isVisible" name="content" />
+		<slot v-else name="spinner" />
+	</div>
+</template>

src/ui/src/wds/WdsDropdownMenu.spec.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import WdsDropdownMenu from "./WdsDropdownMenu.vue";
@@ -15,12 +15,17 @@ describe("WdsDropdownMenu", () => {
 
 	describe("single mode", () => {
 		it("should select an option", async () => {
-			const wrapper = shallowMount(WdsDropdownMenu, {
+			const wrapper = mount(WdsDropdownMenu, {
 				props: {
 					selected: "a",
 					enableMultiSelection: false,
 					options,
 				},
+				global: {
+					stubs: {
+						WdsDropdownMenuItem: true,
+					},
+				},
 			});
 
 			await wrapper
@@ -34,12 +39,17 @@ describe("WdsDropdownMenu", () => {
 
 	describe("multiple mode", () => {
 		it("should support multiple mode", () => {
-			const wrapper = shallowMount(WdsDropdownMenu, {
+			const wrapper = mount(WdsDropdownMenu, {
 				props: {
 					selected: ["???"],
 					enableMultiSelection: true,
 					options,
 				},
+				global: {
+					stubs: {
+						WdsDropdownMenuItem: true,
+					},
+				},
 			});
 
 			wrapper.getComponent(WdsCheckbox).vm.$emit("update:modelValue");

src/ui/src/wds/WdsDropdownMenu.vue

@@ -49,31 +49,37 @@
 			</button>
 		</template>
 
-		<template v-else-if="enableMultiSelection">
-			<WdsCheckbox
-				v-for="option in optionsFiltered"
-				:key="option.value"
-				class="WdsDropdownMenu__checkbox"
-				:checked="isSelected(option.value)"
-				:label="option.label"
-				:detail="option.detail"
-				:data-automation-key="option.value"
-				:disabled="option.disabled"
-				:model-value="isSelected(option.value)"
-				@update:model-value="onSelect(option.value)"
-			/>
-		</template>
-
-		<template v-else>
-			<WdsDropdownMenuItem
-				v-for="option in optionsFiltered"
-				:key="option.value"
-				:option="option"
-				:data-automation-key="option.value"
-				:selected="isSelected(option.value)"
-				@click.stop="onSelect(option.value)"
-			/>
-		</template>
+		<SharedLazyLoader
+			v-for="option in optionsFiltered"
+			v-else
+			:key="option.value"
+		>
+			<template #spinner>
+				<div class="WdsDropdownMenu__itemLazyLoader">
+					<WdsSkeletonLoader />
+				</div>
+			</template>
+			<template #content>
+				<WdsCheckbox
+					v-if="enableMultiSelection"
+					class="WdsDropdownMenu__checkbox"
+					:checked="isSelected(option.value)"
+					:label="option.label"
+					:detail="option.detail"
+					:data-automation-key="option.value"
+					:disabled="option.disabled"
+					:model-value="isSelected(option.value)"
+					@update:model-value="onSelect(option.value)"
+				/>
+				<WdsDropdownMenuItem
+					v-else
+					:option="option"
+					:data-automation-key="option.value"
+					:selected="isSelected(option.value)"
+					@click.stop="onSelect(option.value)"
+				/>
+			</template>
+		</SharedLazyLoader>
 	</div>
 </template>
 
@@ -101,6 +107,7 @@ import WdsIcon from "./WdsIcon.vue";
 import WdsSkeletonLoader from "./WdsSkeletonLoader.vue";
 import WdsCheckbox from "./WdsCheckbox.vue";
 import WdsDropdownMenuItem from "./WdsDropdownMenuItem.vue";
+import SharedLazyLoader from "@/components/shared/SharedLazyLoader.vue";
 
 const props = defineProps({
 	options: {
@@ -224,6 +231,10 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	pointer-events: all;
 }
 
+.WdsDropdownMenu__itemLazyLoader {
+	padding: 12px;
+}
+
 .WdsDropdownMenu__header {
 	position: sticky;
 	top: 0px;

tests/e2e/tests/undoRedo.spec.ts

@@ -70,6 +70,7 @@ test.describe("undo and redo", () => {
 		await expect(page.locator(COMPONENT_LOCATOR)).toHaveText("cool text");
 
 		await page.locator(COMPONENT_LOCATOR).click();
+		await page.locator('[data-automation-action="expand-settings"]').click();
 		const actionDropdown = page
 			.locator(".BuilderSettings")
 			.locator('[data-automation-action="settings-actions-dropdown"]');