Smarter 'Open App' Button: No More Mystery 404s During Deployment

Release: v1.0.96 · Category: Usability

The Problem

Every product built by SaaS Factory goes through a short deployment pipeline before it's live. During this window — while product.status is 'setup' or 'onboarding' — the infrastructure is being provisioned, environment variables are being wired up, and Vercel is completing its first deployment.

The ProductHeader component always showed an active 'Open App' button, regardless of this state. A user who clicked it during deployment would be taken to a URL that returned a 404 or a blank Vercel splash page. The status badge in the header did show the current state, but it had no visual or functional connection to the button — leaving users to guess why their app wasn't there yet.

The Fix

Starting in v1.0.96, the 'Open App' button in ProductHeader is deployment-aware.

What you'll see during deployment

When product.status is 'setup' or 'onboarding':

• The Globe icon is swapped for an animated Loader2 spinner, giving an immediate at-a-glance signal that something is happening.
• Hovering over the button reveals a tooltip:

  "Deployment in progress — your app will be ready shortly"

• The button is disabled, so there's no way to accidentally navigate to an unready URL.

What you'll see once the app is live

As soon as the product moves out of the setup/onboarding state, the button returns to normal — the spinner is replaced by the Globe icon, the tooltip is removed, and the button becomes fully interactive, linking directly to the live app.

Why This Matters

Small UX details like this have an outsized impact on trust. A user who clicks 'Open App' and sees a 404 may assume something is broken, file a support ticket, or lose confidence in the platform — even though everything is working exactly as expected behind the scenes.

By connecting the button state directly to product.status, the interface now tells the whole story without requiring users to read documentation or wait for a support response.

Technical Detail

The change is contained entirely within src/components/product-header.tsx. The logic gates on product.status === 'setup' || product.status === 'onboarding' to conditionally:

1. Render <Loader2 className="animate-spin" /> in place of <Globe />
2. Apply a disabled attribute to the button
3. Wrap the button in a tooltip component with the deployment-in-progress message

No API changes, no schema changes, no new environment variables required.