fix: start coder connect progress indicator immediately

ethanndickson · ethanndickson · commit 60f8964cc101 · 2025-08-04T19:42:32.000+10:00
diff --git a/Coder-Desktop/Coder-Desktop/VPN/VPNProgress.swift b/Coder-Desktop/Coder-Desktop/VPN/VPNProgress.swift
@@ -13,9 +13,12 @@ struct VPNProgressView: View {
     var body: some View {
         VStack {
             CircularProgressView(value: value)
-                // We estimate that the last half takes 8 seconds
+                // We estimate the duration of the last 40%
                 // so it doesn't appear stuck
-                .autoComplete(threshold: 0.5, duration: 8)
+                .autoComplete(threshold: 0.6, duration: 2.8)
+                // We estimate the duration of the first 15% (spawning Helper)
+                // so it doesn't appear stuck
+                .autoStart(to: 0.15, duration: 1.8)
             Text(progressMessage)
                 .multilineTextAlignment(.center)
         }
@@ -51,13 +54,13 @@ struct VPNProgressView: View {
             // 35MB if the server doesn't give us the expected size
             let totalBytes = downloadProgress.totalBytesToWrite ?? 35_000_000
             let downloadPercent = min(1.0, Float(downloadProgress.totalBytesWritten) / Float(totalBytes))
-            return 0.4 * downloadPercent
+            return 0.15 + (0.35 * downloadPercent)
         case .validating:
-            return 0.43
+            return 0.53
         case .removingQuarantine:
-            return 0.46
+            return 0.56
         case .startingTunnel:
-            return 0.50
+            return 0.60
         }
     }
 }
diff --git a/Coder-Desktop/Coder-Desktop/Views/CircularProgressView.swift b/Coder-Desktop/Coder-Desktop/Views/CircularProgressView.swift
@@ -11,6 +11,11 @@ struct CircularProgressView: View {
     var autoCompleteThreshold: Float?
     var autoCompleteDuration: TimeInterval?
 
+    var autoStartValue: Float?
+    var autoStartDuration: TimeInterval?
+
+    @State private var currentProgress: Float = 0
+
     var body: some View {
         ZStack {
             if let value {
@@ -19,13 +24,23 @@ struct CircularProgressView: View {
                         .stroke(backgroundColor, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
 
                     Circle()
-                        .trim(from: 0, to: CGFloat(displayValue(for: value)))
+                        .trim(from: 0, to: CGFloat(displayValue(for: currentProgress)))
                         .stroke(primaryColor, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
                         .rotationEffect(.degrees(-90))
-                        .animation(autoCompleteAnimation(for: value), value: value)
                 }
                 .frame(width: diameter, height: diameter)
-
+                .onAppear {
+                    if let autoStartValue, let autoStartDuration, value == 0 {
+                        withAnimation(.easeOut(duration: autoStartDuration)) {
+                            currentProgress = autoStartValue
+                        }
+                    }
+                }
+                .onChange(of: value) {
+                    withAnimation(currentAnimation(for: value)) {
+                        currentProgress = value
+                    }
+                }
             } else {
                 IndeterminateSpinnerView(
                     diameter: diameter,
@@ -48,11 +63,15 @@ struct CircularProgressView: View {
         return value
     }
 
-    private func autoCompleteAnimation(for value: Float) -> Animation? {
+    private func currentAnimation(for value: Float) -> Animation {
         guard let threshold = autoCompleteThreshold,
               let duration = autoCompleteDuration,
               value >= threshold, value < 1.0
         else {
+            // Use the auto-start animation if it's running, otherwise default.
+            if let autoStartDuration, value < (autoStartValue ?? 0) {
+                return .easeOut(duration: autoStartDuration)
+            }
             return .default
         }
 
@@ -67,6 +86,13 @@ extension CircularProgressView {
         view.autoCompleteDuration = duration
         return view
     }
+
+    func autoStart(to value: Float, duration: TimeInterval) -> CircularProgressView {
+        var view = self
+        view.autoStartValue = value
+        view.autoStartDuration = duration
+        return view
+    }
 }
 
 // We note a constant >10% CPU usage when using a SwiftUI rotation animation that
