From 84ad401ccd62a4ae3f8574f05b05bef678bdacd7 Mon Sep 17 00:00:00 2001 From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com> Date: Sat, 13 Jun 2026 13:30:04 -0700 Subject: [PATCH 001/145] Fix onboarding UI jank: no Loading flash, no canonicalize double-hop (#1007) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 / → /. That double hop is the window where the shell paints over the still-mounted onboarding page. Now it navigates straight to / (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. --- apps/cloud/src/web/pages/create-org.tsx | 45 ++++++------------------- apps/cloud/src/web/pages/setup-mcp.tsx | 10 ++++-- 2 files changed, 18 insertions(+), 37 deletions(-) diff --git a/apps/cloud/src/web/pages/create-org.tsx b/apps/cloud/src/web/pages/create-org.tsx index c96696c822..711b8f28da 100644 --- a/apps/cloud/src/web/pages/create-org.tsx +++ b/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,13 +105,9 @@ export const CreateOrgPage = () => { Step 1 of 2

- {isLoading - ? "Loading" - : count === 0 - ? "Create your organization" - : "You've been invited"} + {count > 0 ? "You've been invited" : "Create your organization"}

- {!isLoading && count === 0 && ( + {count === 0 && (

Organizations group your sources, secrets, and teammates. You can invite others once it's set up. @@ -117,9 +115,7 @@ export const CreateOrgPage = () => { )} - {isLoading && } - - {!isLoading && sole && ( + {sole && ( { /> )} - {!isLoading && count > 1 && ( + {count > 1 && ( { /> )} - {!isLoading && (count === 0 || sole || count > 1) && ( - - )} +