Reduced re-render cycles

Author: Bohdan

.claude/settings.local.json

@@ -59,7 +59,10 @@
       "Read(//tmp/trace_extract/$uuid/**)",
       "Bash(xctrace help:*)",
       "Bash(xctrace export:*)",
-      "Bash(python3:*)"
+      "Bash(python3:*)",
+      "WebSearch",
+      "Bash(chmod +x /Users/lion/Projects/trace-analyzer/analyze_trace.py)",
+      "Bash(grep -n \"orderOut\\\\|isVisible\\\\|alphaValue\\\\|LanguageIndicator\" /Users/lion/Projects/LanguageFlag/LanguageFlagUITests/*.swift)"
     ]
   }
 }

LanguageFlag/Stories/LanguageViewController.swift

@@ -29,7 +29,7 @@ class LanguageViewController: NSViewController {
     // MARK: - UI Components
     private let visualEffectView: NSVisualEffectView = {
         let view = NSVisualEffectView()
-        view.blendingMode = .behindWindow
+        view.blendingMode = .withinWindow
         view.material = .toolTip
         view.state = .active
         view.translatesAutoresizingMaskIntoConstraints = false

LanguageFlag/Stories/Preferences/Components/SliderTickLabels.swift

@@ -23,7 +23,6 @@ struct SliderTickLabels: View {
                     Text(label)
                         .font(.system(size: 9))
                         .foregroundColor(.secondary)
-                        .fixedSize()
                         .position(x: trackInset + fraction * trackWidth, y: 7)
                 }
             }

LanguageFlag/Stories/Preferences/Panes/AboutPreferencesPane.swift

@@ -14,18 +14,23 @@ struct AboutPreferencesPane: View {
 
     @State private var isHovering = false
     @State private var rotationDegrees: Double = 0
+    @State private var isVisible = false
 
     // MARK: - Views
 
     var body: some View {
         ZStack {
-            animatedGradientBackground
+            if isVisible {
+                animatedGradientBackground
+            }
 
             ScrollView {
                 appInfoSection
                     .padding()
             }
         }
+        .onAppear { isVisible = true }
+        .onDisappear { isVisible = false }
     }
 }
 
@@ -61,7 +66,9 @@ private extension AboutPreferencesPane {
         VStack(spacing: 16) {
             // App Icon with orbiting flags
             ZStack {
-                orbitingFlagsView
+                if isVisible {
+                    orbitingFlagsView
+                }
 
                 interactiveAppIcon
             }

LanguageFlag/Stories/Preferences/Panes/AppearancePreferencesPane.swift

@@ -4,12 +4,11 @@ import SwiftUI
 struct AppearancePreferencesPane: View {
 
     // MARK: - Variables
-    @ObservedObject private var preferences: UserPreferences
-    
-    // MARK: - Init
-    init(preferences: UserPreferences) {
-        self.preferences = preferences
-    }
+    @Binding var opacity: Double
+    @Binding var animationStyle: AnimationStyle
+    @Binding var animationDuration: Double
+    @Binding var displayDuration: Double
+    @Binding var resetAnimationOnChange: Bool
 
     // MARK: - Views
     var body: some View {
@@ -50,13 +49,13 @@ struct AppearancePreferencesPane: View {
 
             HStack(alignment: .top, spacing: 8) {
                 VStack(spacing: 2) {
-                    Slider(value: $preferences.opacity, in: 0.5...1.0, step: 0.05)
+                    Slider(value: $opacity, in: 0.5...1.0, step: 0.05)
                         .accessibilityIdentifier("opacity_slider")
 
                     SliderTickLabels(labels: opacitySteps.map { String(format: "%.0f%%", $0 * 100) })
                 }
 
-                Text(String(format: "%.0f%%", preferences.opacity * 100))
+                Text(String(format: "%.0f%%", opacity * 100))
                     .frame(width: 95, alignment: .trailing)
                     .accessibilityIdentifier("opacity_value")
             }
@@ -101,7 +100,7 @@ struct AppearancePreferencesPane: View {
 
                 Spacer()
 
-                Toggle("Reset animation on layout change", isOn: $preferences.resetAnimationOnChange)
+                Toggle("Reset animation on layout change", isOn: $resetAnimationOnChange)
                     .toggleStyle(.switch)
                     .labelsHidden()
                     .accessibilityLabel("Reset animation on layout change")
@@ -119,13 +118,13 @@ struct AppearancePreferencesPane: View {
 
             HStack(alignment: .top, spacing: 8) {
                 VStack(spacing: 2) {
-                    Slider(value: $preferences.animationDuration, in: 0.1...1.0, step: 0.1)
+                    Slider(value: $animationDuration, in: 0.1...1.0, step: 0.1)
                         .accessibilityIdentifier("animation_duration_slider")
 
                     SliderTickLabels(labels: animationSpeedSteps.map { String(format: "%.1f", $0) })
                 }
 
-                Text(String(format: "%.1fs", preferences.animationDuration))
+                Text(String(format: "%.1fs", animationDuration))
                     .frame(width: 95, alignment: .trailing)
                     .accessibilityIdentifier("animation_duration_value")
             }
@@ -145,12 +144,12 @@ struct AppearancePreferencesPane: View {
 
             HStack(alignment: .top, spacing: 8) {
                 VStack(spacing: 2) {
-                    Slider(value: $preferences.displayDuration, in: 0.5...5.0, step: 0.5)
+                    Slider(value: $displayDuration, in: 0.5...5.0, step: 0.5)
 
                     SliderTickLabels(labels: displayDurationSteps.map { String(format: "%.1f", $0) })
                 }
 
-                Text(String(format: "%.1fs", preferences.displayDuration))
+                Text(String(format: "%.1fs", displayDuration))
                     .frame(width: 95, alignment: .trailing)
             }
 
@@ -166,14 +165,14 @@ private extension AppearancePreferencesPane {
 
     private func animationStyleButton(for style: AnimationStyle) -> some View {
         Button {
-            preferences.animationStyle = style
+            animationStyle = style
         } label: {
             Text(style.description)
                 .font(.caption)
                 .frame(maxWidth: .infinity)
                 .padding(.vertical, 6)
-                .background(preferences.animationStyle == style ? Color.accentColor : Color.gray.opacity(0.15))
-                .foregroundColor(preferences.animationStyle == style ? .white : .primary)
+                .background(animationStyle == style ? Color.accentColor : Color.gray.opacity(0.15))
+                .foregroundColor(animationStyle == style ? .white : .primary)
                 .cornerRadius(6)
         }
         .buttonStyle(.plain)

LanguageFlag/Stories/Preferences/Panes/GeneralPreferencesPane.swift

@@ -5,13 +5,14 @@ import LaunchAtLogin
 struct GeneralPreferencesPane: View {
 
     // MARK: - Variables
-    @ObservedObject private var preferences: UserPreferences
+    @Binding var displayPosition: DisplayPosition
+    @Binding var windowSize: WindowSize
+    @Binding var showInMenuBar: Bool
+    @Binding var showCapsLockIndicator: Bool
+    @Binding var bypassClick: Bool
+    let onReset: () -> Void
+
     @State private var showResetConfirmation = false
-    
-    // MARK: - Init
-    init(preferences: UserPreferences) {
-        self.preferences = preferences
-    }
 
     // MARK: - Views
     var body: some View {
@@ -45,7 +46,7 @@ struct GeneralPreferencesPane: View {
             Text("Display Position")
                 .font(.headline)
 
-            PositionPickerView(selectedPosition: $preferences.displayPosition)
+            PositionPickerView(selectedPosition: $displayPosition)
                 .frame(height: 160)
 
             Text("Click a position to place the indicator on your screen")
@@ -63,8 +64,8 @@ struct GeneralPreferencesPane: View {
                 VStack(spacing: 2) {
                     Slider(
                         value: Binding(
-                            get: { Double(WindowSize.allCases.firstIndex(of: preferences.windowSize) ?? 1) },
-                            set: { preferences.windowSize = WindowSize.allCases[Int($0)] }
+                            get: { Double(WindowSize.allCases.firstIndex(of: windowSize) ?? 1) },
+                            set: { windowSize = WindowSize.allCases[Int($0)] }
                         ),
                         in: 0...3,
                         step: 1
@@ -73,7 +74,7 @@ struct GeneralPreferencesPane: View {
                     SliderTickLabels(labels: WindowSize.allCases.map(\.description))
                 }
 
-                Text(preferences.windowSize.description)
+                Text(windowSize.description)
                     .frame(width: 95, alignment: .trailing)
                     .foregroundColor(.primary)
             }
@@ -99,7 +100,7 @@ struct GeneralPreferencesPane: View {
                             .foregroundColor(.secondary)
                     }
                     Spacer()
-                    Toggle("Show current layout in menu bar", isOn: $preferences.showInMenuBar)
+                    Toggle("Show current layout in menu bar", isOn: $showInMenuBar)
                         .toggleStyle(.switch)
                         .labelsHidden()
                         .accessibilityIdentifier("menuBarToggle")
@@ -114,7 +115,7 @@ struct GeneralPreferencesPane: View {
                             .foregroundColor(.secondary)
                     }
                     Spacer()
-                    Toggle("Show indicator on Caps Lock change", isOn: $preferences.showCapsLockIndicator)
+                    Toggle("Show indicator on Caps Lock change", isOn: $showCapsLockIndicator)
                         .toggleStyle(.switch)
                         .labelsHidden()
                         .accessibilityIdentifier("capsLockToggle")
@@ -129,7 +130,7 @@ struct GeneralPreferencesPane: View {
                             .foregroundColor(.secondary)
                     }
                     Spacer()
-                    Toggle("Bypass click", isOn: $preferences.bypassClick)
+                    Toggle("Bypass click", isOn: $bypassClick)
                         .toggleStyle(.switch)
                         .labelsHidden()
                         .accessibilityIdentifier("bypassClickToggle")
@@ -178,7 +179,7 @@ struct GeneralPreferencesPane: View {
                 titleVisibility: .visible
             ) {
                 Button("Reset", role: .destructive) {
-                    preferences.resetToDefaults()
+                    onReset()
                 }
             }
         }

LanguageFlag/Stories/Preferences/Panes/ShortcutsPreferencesPane.swift

@@ -4,12 +4,7 @@ import SwiftUI
 struct ShortcutsPreferencesPane: View {
 
     // MARK: - Variables
-    @ObservedObject private var preferences: UserPreferences
-    
-    // MARK: - Init
-    init(preferences: UserPreferences) {
-        self.preferences = preferences
-    }
+    @Binding var showShortcuts: Bool
 
     // MARK: - Views
     var body: some View {
@@ -19,7 +14,7 @@ struct ShortcutsPreferencesPane: View {
     private var content: some View {
         ScrollView {
             VStack(alignment: .leading, spacing: 16) {
-                Toggle("Show keyboard shortcuts for current layout", isOn: $preferences.showShortcuts)
+                Toggle("Show keyboard shortcuts for current layout", isOn: $showShortcuts)
                     .help("Display common keyboard shortcuts when switching layouts")
 
                 Divider()

LanguageFlag/Stories/Preferences/PreferencesView.swift

@@ -1,11 +1,51 @@
 import SwiftUI
 
-/// Main preferences view - tab-based navigation across preference panes
+// MARK: - State holder (re-renders on objectWillChange, but its body is trivial)
+
+/// Owns the UserPreferences @StateObject and projects bindings into the static PreferencesView.
+/// Kept separate so that PreferencesView.body never re-runs due to UserPreferences changes.
 struct PreferencesView: View {
 
-    // MARK: - Variables
     @StateObject private var preferences = UserPreferences.shared
 
+    var body: some View {
+        PreferencesContentView(
+            displayPosition: $preferences.displayPosition,
+            windowSize: $preferences.windowSize,
+            showInMenuBar: $preferences.showInMenuBar,
+            showCapsLockIndicator: $preferences.showCapsLockIndicator,
+            bypassClick: $preferences.bypassClick,
+            opacity: $preferences.opacity,
+            animationStyle: $preferences.animationStyle,
+            animationDuration: $preferences.animationDuration,
+            displayDuration: $preferences.displayDuration,
+            resetAnimationOnChange: $preferences.resetAnimationOnChange,
+            showShortcuts: $preferences.showShortcuts,
+            onReset: { UserPreferences.shared.resetToDefaults() }
+        )
+    }
+}
+
+// MARK: - Static content (TabView — body only re-runs when its own @State/@Binding values change)
+
+/// Main preferences view - tab-based navigation across preference panes.
+/// Takes all preferences as bindings so its body is not invalidated by unrelated property changes.
+private struct PreferencesContentView: View {
+
+    // MARK: - Bindings from UserPreferences
+    @Binding var displayPosition: DisplayPosition
+    @Binding var windowSize: WindowSize
+    @Binding var showInMenuBar: Bool
+    @Binding var showCapsLockIndicator: Bool
+    @Binding var bypassClick: Bool
+    @Binding var opacity: Double
+    @Binding var animationStyle: AnimationStyle
+    @Binding var animationDuration: Double
+    @Binding var displayDuration: Double
+    @Binding var resetAnimationOnChange: Bool
+    @Binding var showShortcuts: Bool
+    let onReset: () -> Void
+
     @State private var selectedPane: PreferencePane = .general
 
     // MARK: - Views
@@ -27,14 +67,27 @@ struct PreferencesView: View {
     private func paneContent(for pane: PreferencePane) -> some View {
         switch pane {
         case .general:
-            GeneralPreferencesPane(preferences: preferences)
+            GeneralPreferencesPane(
+                displayPosition: $displayPosition,
+                windowSize: $windowSize,
+                showInMenuBar: $showInMenuBar,
+                showCapsLockIndicator: $showCapsLockIndicator,
+                bypassClick: $bypassClick,
+                onReset: onReset
+            )
 
         case .appearance:
-            AppearancePreferencesPane(preferences: preferences)
+            AppearancePreferencesPane(
+                opacity: $opacity,
+                animationStyle: $animationStyle,
+                animationDuration: $animationDuration,
+                displayDuration: $displayDuration,
+                resetAnimationOnChange: $resetAnimationOnChange
+            )
 
         case .shortcuts:
             #if FEATURE_SHORTCUTS
-            ShortcutsPreferencesPane(preferences: preferences)
+            ShortcutsPreferencesPane(showShortcuts: $showShortcuts)
             #else
             EmptyView()
             #endif