enh(sync): add useDelayedFlag

Allow changing a flag with different delays:
* Switch it on slow.
* Switch it off fast.

Useful for errors - so they only show after a while but are resolved quickly.

Example:

const input = ref(false)
const { delayed } = useDelayedFlag(input)
...
input.value = true
// 5 seconds later delayed.value will be true
...
input.value = false
// 200 ms later delayed.value will be true

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

src/components/Editor/useDelayedFlag.ts

@@ -0,0 +1,29 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { ref, watch, type Ref } from 'vue'
+
+/**
+ * Delay the changing of the boolean
+ * @param input - ref to react to
+ */
+export function useDelayedFlag(input: Ref<boolean>): { delayed: Ref<boolean> } {
+
+	let timeout: ReturnType<typeof setTimeout> | undefined
+	const delayed = ref(input.value)
+
+	watch(input, (val) => {
+		if (timeout) {
+			clearTimeout(timeout)
+		}
+		const delay = val ? 5000 : 200
+		timeout = setTimeout(() => {
+			delayed.value = val
+		}, delay)
+
+	})
+
+	return { delayed }
+}