Update secure-gateway-setup.tsx

AppImage/components/secure-gateway-setup.tsx

@@ -192,17 +192,27 @@ export function SecureGatewaySetup() {
         }
       }
 
-      setDeployProgress("Creating LXC container...")
+      // Simulate progress while API call runs
-      setDeployPercent(20)
+      const progressInterval = setInterval(() => {
-
+        setDeployPercent(prev => {
-      // Small delay to show progress
+          if (prev < 85) {
-      await new Promise(resolve => setTimeout(resolve, 500))
+            // Update messages based on progress
-      setDeployProgress("Downloading Tailscale image...")
+            if (prev < 20) {
-      setDeployPercent(35)
+              setDeployProgress("Creating LXC container...")
-
+            } else if (prev < 40) {
-      await new Promise(resolve => setTimeout(resolve, 300))
+              setDeployProgress("Downloading Alpine Linux template...")
-      setDeployProgress("Configuring container...")
+            } else if (prev < 55) {
-      setDeployPercent(50)
+              setDeployProgress("Configuring container...")
+            } else if (prev < 70) {
+              setDeployProgress("Installing Tailscale...")
+            } else {
+              setDeployProgress("Connecting to Tailscale network...")
+            }
+            return prev + 3
+          }
+          return prev
+        })
+      }, 400)
 
       const result = await fetchApi("/api/oci/deploy", {
         method: "POST",
@@ -212,12 +222,7 @@ export function SecureGatewaySetup() {
         })
       })
 
-      setDeployProgress("Installing Tailscale...")
+      clearInterval(progressInterval)
-      setDeployPercent(70)
-
-      await new Promise(resolve => setTimeout(resolve, 300))
-      setDeployProgress("Connecting to Tailscale network...")
-      setDeployPercent(85)
 
       if (!result.success) {
         setDeployError(result.message || "Failed to deploy gateway")