From ec4692da15359b4051c3c31c7a2b6f8917899b00 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 8 Oct 2025 07:14:06 +0100
Subject: [PATCH] fix: prevent sliders from jumping when resetting settings

- Added debouncing (300ms) to settings auto-save
- Added flag to prevent external settings updates during local editing
- External updates are blocked for 500ms after save completes
- Fixes issue where rapid save/subscription cycle caused sliders to jump
- Settings now update smoothly when resetting to defaults
---
 src/components/Settings.tsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 7f4741f8..af95b006 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -50,8 +50,15 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
     return migrated
   })
   const isInitialMount = useRef(true)
+  const saveTimeoutRef = useRef<number | null>(null)
+  const isLocallyUpdating = useRef(false)
 
   useEffect(() => {
+    // Don't update from external settings if we're currently making local changes
+    if (isLocallyUpdating.current) {
+      return
+    }
+    
     const migrated = { ...settings }
     const anySettings = migrated as Record<string, unknown>
     if ('zapSplitPercentage' in anySettings && !('zapSplitHighlighterWeight' in migrated)) {
@@ -82,7 +89,30 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
       isInitialMount.current = false
       return
     }
-    onSave(localSettings)
+    
+    // Mark that we're making local updates
+    isLocallyUpdating.current = true
+    
+    // Clear any pending save
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current)
+    }
+    
+    // Debounce the save to avoid rapid updates
+    saveTimeoutRef.current = setTimeout(() => {
+      onSave(localSettings).finally(() => {
+        // Allow external updates again after a short delay
+        setTimeout(() => {
+          isLocallyUpdating.current = false
+        }, 500)
+      })
+    }, 300)
+    
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+    }
   }, [localSettings, onSave])
 
   const handleResetToDefaults = () => {