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.

Rhys Sullivan committed 5 months ago

Commit 84ad4011 parent 1f9bfe02 files · +18 −37Browse files

Unified · Split

2 files

apps/cloud/src/web/pages/create-org.tsx +10 −35
apps/cloud/src/web/pages/setup-mcp.tsx +8 −2

apps/cloud/src/web/pages/create-org.tsx+10−35

 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";
     },
   });
-  const isLoading =
+  // Almost no new user has a pending invitation, so we never show a loading
-    AsyncResult.isInitial(invitationsResult) || AsyncResult.isWaiting(invitationsResult);
+  // 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[],
             Step 1 of 2
           </p>
           <h1 className="font-serif text-3xl">
-            {isLoading
+            {count > 0 ? "You've been invited" : "Create your organization"}
-              ? "Loading"
-              : count === 0
-                ? "Create your organization"
-                : "You've been invited"}
           </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.
           )}
         </header>
-        {isLoading && <InvitationsSkeleton />}
+        {sole && (
-        {!isLoading && sole && (
           <SingleInvitationView
             invitation={sole}
             accepting={acceptingId === sole.id}
           />
         )}
-        {!isLoading && count > 1 && (
+        {count > 1 && (
           <MultiInvitationsView
             invitations={invitations}
             acceptingId={acceptingId}
           />
         )}
-        {!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 */}
 // ---------------------------------------------------------------------------
-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+8−2

   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");
             type="button"
             onClick={() => {
               trackEvent("setup_mcp_skipped");
-              void navigate({ to: "/{-$orgSlug}" });
+              void goToApp();
             }}
             className="text-xs text-muted-foreground transition-colors hover:text-foreground"
           >
             size="sm"
             onClick={() => {
               trackEvent("setup_mcp_completed");
-              void navigate({ to: "/{-$orgSlug}" });
+              void goToApp();
             }}
           >
             Continue to app

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

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code