From 7224561b76a2661594ea217d70d74c3403693a8c Mon Sep 17 00:00:00 2001
From: "Cameron (3539)" <theforgelover@gmail.com>
Date: Mon, 21 Oct 2024 00:48:01 -0400
Subject: [PATCH] Add slider debounce (#1479)

Sliders for exposure and brightness would spam messages on the backend.
This used to cause crashes and can cause it to get quite laggy /
delayed. This will add a 20ms debounce which won't send the value to the
backend until the value hasn't changed for 20ms.

---------

Co-authored-by: Matt <matthew.morley.ca@gmail.com>
---
 photon-client/src/components/common/pv-slider.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/photon-client/src/components/common/pv-slider.vue b/photon-client/src/components/common/pv-slider.vue
index 0fb59d61a..21a5374c6 100644
--- a/photon-client/src/components/common/pv-slider.vue
+++ b/photon-client/src/components/common/pv-slider.vue
@@ -25,9 +25,22 @@ const emit = defineEmits<{
   (e: "input", value: number): void;
 }>();
 
+// Debounce function
+function debounce(func: (...args: any[]) => void, wait: number) {
+  let timeout: ReturnType<typeof setTimeout>;
+  return function (...args: any[]) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
+const debouncedEmit = debounce((v: number) => {
+  emit("input", v);
+}, 20);
+
 const localValue = computed({
   get: () => props.value,
-  set: (v) => emit("input", parseFloat(v as unknown as string))
+  set: (v) => debouncedEmit(parseFloat(v as unknown as string))
 });
 </script>