diff --git a/src/lib/components/common/Switch.svelte b/src/lib/components/common/Switch.svelte
index c04d9b2ef4..c71ddb0733 100644
--- a/src/lib/components/common/Switch.svelte
+++ b/src/lib/components/common/Switch.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { createEventDispatcher, tick, getContext } from 'svelte';
 	import { Switch } from 'bits-ui';
+
+	import { createEventDispatcher, tick, getContext } from 'svelte';
 	import { settings } from '$lib/stores';
+
 	import Tooltip from './Tooltip.svelte';
 	export let state = true;
 	export let id = '';
@@ -10,8 +12,6 @@
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
-
-	$: dispatch('change', state);
 </script>
 
 <Tooltip
@@ -28,6 +28,10 @@
 			: 'outline outline-1 outline-gray-100 dark:outline-gray-800'} {state
 			? ' bg-emerald-500 dark:bg-emerald-700'
 			: 'bg-gray-200 dark:bg-transparent'}"
+		onCheckedChange={async () => {
+			await tick();
+			dispatch('change', state);
+		}}
 	>
 		<Switch.Thumb
 			class="pointer-events-none block size-3 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini "