Fix onboarding UI jank: no Loading flash, no canonicalize double-hop (#1007)

Two flashes visible in the onboarding flow:

1. create-org flickered 'Create your organization' → 'Loading' → back. The
   header was gated on the pending-invitations atom being initial OR waiting,
   and that atom is keyed on auth — so the create-org submit (which invalidates
   the auth keys) put it into 'waiting' and flipped the whole page to 'Loading'.
   Almost no new user has a pending invitation, so we now show NO loading
   placeholder at all: the create form renders immediately and stays put, and
   invitations (when they exist) just appear above it once the fetch resolves.
   Removed the InvitationsSkeleton entirely.

2. The connect-MCP step flashed the app sidebar. 'Continue to app' / 'Skip'
   navigated to the BARE /{-$orgSlug}, which mounts the shell at / and then
   OrgSlugGate fires a SECOND navigation to canonicalize / → /<slug>. That
   double hop is the window where the shell paints over the still-mounted
   onboarding page. Now it navigates straight to /<slug> (the page already has
   the org slug), so the shell mounts once.

Both pre-existing; the new auth-routing flow test (#1006) made them visible.

Author: RhysSullivan

apps/cloud/src/web/pages/create-org.tsx

@@ -6,7 +6,6 @@ import * as Exit from "effect/Exit";
 import { authWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { trackEvent } from "@executor-js/react/api/analytics";
 import { Button } from "@executor-js/react/components/button";
-import { Skeleton } from "@executor-js/react/components/skeleton";
 
 import { AUTH_PATHS } from "../../auth/api";
 import { acceptInvitation, pendingInvitationsAtom, useAuth } from "../auth";
@@ -84,8 +83,11 @@ export const CreateOrgPage = () => {
     },
   });
 
-  const isLoading =
-    AsyncResult.isInitial(invitationsResult) || AsyncResult.isWaiting(invitationsResult);
+  // Almost no new user has a pending invitation, so we never show a loading
+  // placeholder for them — the create form renders immediately and stays put.
+  // Invitations (when they exist) just appear above it once the fetch resolves;
+  // a refetch (the create-org submit invalidates the auth-keyed atom) keeps the
+  // last value, so nothing flickers.
   const invitations = AsyncResult.match(invitationsResult, {
     onInitial: () => [] as readonly PendingInvitation[],
     onFailure: () => [] as readonly PendingInvitation[],
@@ -103,23 +105,17 @@ export const CreateOrgPage = () => {
             Step 1 of 2
           </p>
           <h1 className="font-serif text-3xl">
-            {isLoading
-              ? "Loading"
-              : count === 0
-                ? "Create your organization"
-                : "You've been invited"}
+            {count > 0 ? "You've been invited" : "Create your organization"}
           </h1>
-          {!isLoading && count === 0 && (
+          {count === 0 && (
             <p className="text-sm text-muted-foreground">
               Organizations group your sources, secrets, and teammates. You can invite others once
               it's set up.
             </p>
           )}
         </header>
 
-        {isLoading && <InvitationsSkeleton />}
-
-        {!isLoading && sole && (
+        {sole && (
           <SingleInvitationView
             invitation={sole}
             accepting={acceptingId === sole.id}
@@ -128,7 +124,7 @@ export const CreateOrgPage = () => {
           />
         )}
 
-        {!isLoading && count > 1 && (
+        {count > 1 && (
           <MultiInvitationsView
             invitations={invitations}
             acceptingId={acceptingId}
@@ -137,9 +133,7 @@ export const CreateOrgPage = () => {
           />
         )}
 
-        {!isLoading && (count === 0 || sole || count > 1) && (
-          <CreateOrgSection isPrimary={count === 0} form={form} />
-        )}
+        <CreateOrgSection isPrimary={count === 0} form={form} />
 
         <footer className="flex items-center justify-center">
           {/* oxlint-disable-next-line react/forbid-elements */}
@@ -161,25 +155,6 @@ export const CreateOrgPage = () => {
 
 // ---------------------------------------------------------------------------
 
-const InvitationsSkeleton = () => (
-  <div className="flex flex-col gap-2.5">
-    <InvitationRowSkeleton />
-    <InvitationRowSkeleton />
-  </div>
-);
-
-const InvitationRowSkeleton = () => (
-  <div className="flex items-center gap-3 rounded-md border border-border px-3 py-2.5">
-    <div className="flex flex-1 flex-col gap-1.5">
-      <Skeleton className="h-3.5 w-2/5" />
-      <Skeleton className="h-3 w-3/5" />
-    </div>
-    <Skeleton className="h-8 w-16 rounded-md" />
-  </div>
-);
-
-// ---------------------------------------------------------------------------
-
 const InviterAttribution = ({ invitation }: { invitation: PendingInvitation }) => {
   const inviterLabel = invitation.inviter
     ? invitation.inviter.name && invitation.inviter.name.length > 0

apps/cloud/src/web/pages/setup-mcp.tsx

@@ -23,6 +23,12 @@ export const SetupMcpPage = () => {
   const auth = useAuth();
   const organizationSlug =
     auth.status === "authenticated" ? (auth.organization?.slug ?? null) : null;
+  // Land DIRECTLY on the org's canonical URL. Navigating to the bare
+  // `/{-$orgSlug}` would mount the shell at `/`, then OrgSlugGate would fire a
+  // SECOND navigation to canonicalize `/` → `/<slug>` — that double hop is the
+  // window where the shell paints over this still-mounted onboarding page.
+  const goToApp = () =>
+    navigate({ to: "/{-$orgSlug}", params: { orgSlug: organizationSlug ?? undefined } });
   const [origin, setOrigin] = useState<string | null>(null);
   const [advancedOpen, setAdvancedOpen] = useState(false);
   const [elicitationMode, setElicitationMode] = useState<McpElicitationMode>("model");
@@ -150,7 +156,7 @@ export const SetupMcpPage = () => {
             type="button"
             onClick={() => {
               trackEvent("setup_mcp_skipped");
-              void navigate({ to: "/{-$orgSlug}" });
+              void goToApp();
             }}
             className="text-xs text-muted-foreground transition-colors hover:text-foreground"
           >
@@ -160,7 +166,7 @@ export const SetupMcpPage = () => {
             size="sm"
             onClick={() => {
               trackEvent("setup_mcp_completed");
-              void navigate({ to: "/{-$orgSlug}" });
+              void goToApp();
             }}
           >
             Continue to app