FIX: Debounce key LED colors

src/renderer/src/components/common/HSVInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="font-heading mx-2 flex rounded-b-lg border-x border-b border-zinc-800 p-4"
+    class="font-heading mx-2 flex rounded-b-lg border-x border-b border-zinc-800 p-4 transition-colors"
     :class="{ 'rounded-t-lg': roundedTop }"
     :style="{ backgroundColor: color.hex() }"
   >
@@ -186,6 +186,7 @@ import Color from 'color'
 import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import { Separator } from '@renderer/components/ui/separator'
+import { useDebounceFn } from '@vueuse/core'
 
 const props = defineProps({
   colorNumber: {
@@ -202,6 +203,17 @@ const emit = defineEmits(['input'])
 
 const previousColor = ref(Color(props.colorNumber))
 
+const updateColor = useDebounceFn(
+  (newColor) => {
+    if (newColor.rgbNumber() !== color.value.rgbNumber()) {
+      previousColor.value = newColor
+      emit('input', newColor.rgbNumber())
+    }
+  },
+  20,
+  { maxWait: 30 }
+)
+
 const color = computed({
   get() {
     if (previousColor.value.rgbNumber() === props.colorNumber) {
@@ -210,10 +222,7 @@ const color = computed({
     return Color(props.colorNumber)
   },
   set(newColor) {
-    if (newColor.rgbNumber() !== color.value.rgbNumber()) {
-      previousColor.value = newColor
-      emit('input', newColor.rgbNumber())
-    }
+    updateColor(newColor)
   }
 })
 

src/renderer/src/components/common/PaletteInput.vue

@@ -26,7 +26,7 @@
       <button
         v-for="(option, key) in options"
         :key="key"
-        class="h-6 flex-1"
+        class="h-6 flex-1 transition-colors"
         :class="{ 'color-tab': currentOption === key }"
         :style="{ background: Color(option.colorNumber).hex() }"
         @click="currentOption = key"
@@ -86,6 +86,8 @@ onBeforeMount(() => {
   width: var(--rounded);
   height: var(--rounded);
   content: ' ';
+  transition: box-shadow 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .color-tab:before {

src/renderer/src/deviceStore.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { useDebounceFn } from '@vueuse/core'
 
 interface Profile {
   version: number
@@ -194,7 +195,7 @@ export const useDeviceStore = defineStore('device', {
       const propertyName = `button${key.toUpperCase()}${pressed ? 'Press' : 'Idle'}`
       this.currentProfile![propertyName] = color
       if (updateDevice) {
-        nanoIpc.send(
+        sendDebounced(
           this.currentDeviceId!,
           JSON.stringify({ profile: this.currentProfileName, updates: { [propertyName]: color } })
         )
@@ -203,6 +204,10 @@ export const useDeviceStore = defineStore('device', {
   }
 })
 
+const sendDebounced = useDebounceFn((deviceid, jsonstr) => nanoIpc.send(deviceid, jsonstr), 20, {
+  maxWait: 30
+})
+
 export const initializeDevices = () => {
   const deviceStore = useDeviceStore()