diff --git a/AppImage/components/secure-gateway-setup.tsx b/AppImage/components/secure-gateway-setup.tsx index 5cc8eec0..2ff1817f 100644 --- a/AppImage/components/secure-gateway-setup.tsx +++ b/AppImage/components/secure-gateway-setup.tsx @@ -80,7 +80,6 @@ export function SecureGatewaySetup() { const [config, setConfig] = useState>({}) const [deploying, setDeploying] = useState(false) const [deployProgress, setDeployProgress] = useState("") - const [deployPercent, setDeployPercent] = useState(0) const [deployError, setDeployError] = useState("") // Installed state @@ -174,8 +173,7 @@ export function SecureGatewaySetup() { const handleDeploy = async () => { setDeploying(true) setDeployError("") - setDeployProgress("Preparing deployment...") - setDeployPercent(5) + setDeployProgress("Creating LXC container...") try { // Prepare config based on access_mode @@ -192,27 +190,21 @@ export function SecureGatewaySetup() { } } - // Simulate progress while API call runs + // Show progress messages while deploying + const messages = [ + "Creating LXC container...", + "Downloading Alpine Linux template...", + "Configuring container...", + "Installing Tailscale...", + "Connecting to Tailscale network..." + ] + let msgIndex = 0 const progressInterval = setInterval(() => { - setDeployPercent(prev => { - if (prev < 85) { - // Update messages based on progress - if (prev < 20) { - setDeployProgress("Creating LXC container...") - } else if (prev < 40) { - setDeployProgress("Downloading Alpine Linux template...") - } else if (prev < 55) { - setDeployProgress("Configuring container...") - } else if (prev < 70) { - setDeployProgress("Installing Tailscale...") - } else { - setDeployProgress("Connecting to Tailscale network...") - } - return prev + 3 - } - return prev - }) - }, 400) + msgIndex = (msgIndex + 1) % messages.length + if (msgIndex < messages.length - 1) { + setDeployProgress(messages[msgIndex]) + } + }, 2000) const result = await fetchApi("/api/oci/deploy", { method: "POST", @@ -227,12 +219,10 @@ export function SecureGatewaySetup() { if (!result.success) { setDeployError(result.message || "Failed to deploy gateway") setDeploying(false) - setDeployPercent(0) return } setDeployProgress("Gateway deployed successfully!") - setDeployPercent(100) // Show post-deploy confirmation const needsApproval = deployConfig.access_mode && deployConfig.access_mode !== "none" @@ -630,16 +620,11 @@ export function SecureGatewaySetup() {
- {deployProgress} +
+ {deployProgress} +

This may take a minute...

+
- {/* Progress bar */} -
-
-
-

{deployPercent}% complete

)}