From f7b7ff06ff83b5af19fdfcfbebd547ef1e22f1b3 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 18 Feb 2025 18:32:08 +0000
Subject: [PATCH] Add debounce effect in operator menu

---
 .../components/sidebar/OperatorMenu.svelte    | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/OperatorMenu.svelte b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
index 8ec4df71fd..6b797a983c 100644
--- a/frontend/src/lib/components/sidebar/OperatorMenu.svelte
+++ b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
@@ -112,6 +112,16 @@
 	})
 
 	let moreOpen = false
+	let moreOpenTimeout: NodeJS.Timeout | undefined
+
+	function debouncedSetMoreOpen(value: boolean) {
+		if (moreOpenTimeout) {
+			clearTimeout(moreOpenTimeout)
+		}
+		moreOpenTimeout = setTimeout(() => {
+			moreOpen = value
+		}, 150) // 150ms debounce
+	}
 </script>
 
 <Menubar let:createMenu>
@@ -248,14 +258,14 @@
 				</button>
 			</div>
 			<div
-				on:mouseenter={() => (moreOpen = true)}
-				on:mouseleave={() => (moreOpen = false)}
+				on:mouseenter={() => debouncedSetMoreOpen(true)}
+				on:mouseleave={() => debouncedSetMoreOpen(false)}
 				role="none"
 			>
 				<div
 					use:melt={item}
-					on:m-focusin={() => (moreOpen = true)}
-					on:m-focusout={() => (moreOpen = false)}
+					on:m-focusin={() => debouncedSetMoreOpen(true)}
+					on:m-focusout={() => debouncedSetMoreOpen(false)}
 				>
 					{#if !moreOpen || secondMenuLinks.length === 0}
 						<div class="px-2 py-2 text-tertiary text-2xs">More...</div>
@@ -271,8 +281,8 @@
 									'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 								)}
 								use:melt={item}
-								on:m-focusin={() => (moreOpen = true)}
-								on:m-focusout={() => (moreOpen = false)}
+								on:m-focusin={() => debouncedSetMoreOpen(true)}
+								on:m-focusout={() => debouncedSetMoreOpen(false)}
 							>
 								{menuLink.label}
 							</a>
@@ -283,8 +293,8 @@
 		</div>
 		{#if $enterpriseLicense}
 			<div
-				on:mouseenter={() => (moreOpen = true)}
-				on:mouseleave={() => (moreOpen = false)}
+				on:mouseenter={() => debouncedSetMoreOpen(true)}
+				on:mouseleave={() => debouncedSetMoreOpen(false)}
 				role="none"
 			>
 				<MultiplayerMenu />