enhance(client): improve clip menu ux

1 files changed, 23 insertions, 5 deletions

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 52aba58455..09d530c4ea 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
+import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
@@ -111,11 +111,11 @@ watch(() => props.items, () => {
 	immediate: true,
 });
 
-let childMenu = $ref<MenuItem[] | null>();
+let childMenu = ref<MenuItem[] | null>();
 let childTarget = $shallowRef<HTMLElement | null>();
 
 function closeChild() {
-	childMenu = null;
+	childMenu.value = null;
 	childShowingItem = null;
 }
 
@@ -140,13 +140,31 @@ function onItemMouseLeave(item) {
 	if (childCloseTimer) window.clearTimeout(childCloseTimer);
 }
 
+let childrenCache = new WeakMap();
 async function showChildren(item: MenuItem, ev: MouseEvent) {
+	const children = ref([]);
+	if (childrenCache.has(item)) {
+		children.value = childrenCache.get(item);
+	} else {
+		if (typeof item.children === 'function') {
+			children.value = [{
+				type: 'pending',
+			}];
+			item.children().then(x => {
+				children.value = x;
+				childrenCache.set(item, x);
+			});
+		} else {
+			children.value = item.children;
+		}
+	}
+
 	if (props.asDrawer) {
-		os.popupMenu(item.children, ev.currentTarget ?? ev.target);
+		os.popupMenu(children, ev.currentTarget ?? ev.target);
 		close();
 	} else {
 		childTarget = ev.currentTarget ?? ev.target;
-		childMenu = item.children;
+		childMenu = children;
 		childShowingItem = item;
 	}
 }