address pr feedback

- Gate OnboardingWelcome on !isReady with a spinner (match IndexRedirect)
- Import APP_ROUTES from appRoutes instead of the router shim

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: camielvs

src/components/Onboarding/IndexRedirect.test.tsx

@@ -7,7 +7,7 @@ vi.mock("@tanstack/react-router", () => ({
   Navigate: ({ to }: { to: string }) => <div data-testid="navigate">{to}</div>,
 }));
 
-let onboarding = { isReady: true, isComplete: false, dismissed: false };
+let onboarding = { isResolved: true, shouldShowOnboarding: true };
 vi.mock("@/providers/OnboardingProvider/OnboardingProvider", () => ({
   useOnboarding: () => onboarding,
 }));
@@ -17,26 +17,20 @@ afterEach(cleanup);
 const target = () => screen.queryByTestId("navigate");
 
 describe("IndexRedirect", () => {
-  it("waits (no redirect) until onboarding state is ready", () => {
-    onboarding = { isReady: false, isComplete: false, dismissed: false };
+  it("waits (no redirect) until onboarding state is resolved", () => {
+    onboarding = { isResolved: false, shouldShowOnboarding: false };
     render(<IndexRedirect />);
     expect(target()).toBeNull();
   });
 
-  it("redirects to /welcome while onboarding is active", () => {
-    onboarding = { isReady: true, isComplete: false, dismissed: false };
+  it("redirects to /welcome while onboarding should show", () => {
+    onboarding = { isResolved: true, shouldShowOnboarding: true };
     render(<IndexRedirect />);
     expect(target()).toHaveTextContent("/welcome");
   });
 
-  it("redirects to /dashboard once complete", () => {
-    onboarding = { isReady: true, isComplete: true, dismissed: false };
-    render(<IndexRedirect />);
-    expect(target()).toHaveTextContent("/dashboard");
-  });
-
-  it("redirects to /dashboard once dismissed", () => {
-    onboarding = { isReady: true, isComplete: false, dismissed: true };
+  it("redirects to /dashboard when onboarding should not show", () => {
+    onboarding = { isResolved: true, shouldShowOnboarding: false };
     render(<IndexRedirect />);
     expect(target()).toHaveTextContent("/dashboard");
   });

src/components/Onboarding/IndexRedirect.tsx

@@ -6,21 +6,20 @@ import { useOnboarding } from "@/providers/OnboardingProvider/OnboardingProvider
 import { APP_ROUTES } from "@/routes/appRoutes";
 
 export function IndexRedirect() {
-  const { isReady, isComplete, dismissed } = useOnboarding();
+  const { isResolved, shouldShowOnboarding } = useOnboarding();
 
-  if (!isReady) {
+  if (!isResolved) {
     return (
       <BlockStack align="center" inlineAlign="center" className="h-full">
         <Spinner />
       </BlockStack>
     );
   }
 
-  const showOnboarding = !isComplete && !dismissed;
   return (
     <Navigate
       replace
-      to={showOnboarding ? APP_ROUTES.WELCOME : APP_ROUTES.DASHBOARD}
+      to={shouldShowOnboarding ? APP_ROUTES.WELCOME : APP_ROUTES.DASHBOARD}
     />
   );
 }

src/components/Onboarding/OnboardingNavPill.test.tsx

@@ -12,9 +12,7 @@ let onboarding = {
   steps: [],
   completedCount: 1,
   total: 4,
-  isComplete: false,
-  dismissed: false,
-  isResolved: true,
+  shouldShowOnboarding: true,
   markDocsRead: vi.fn(),
 };
 vi.mock("@/providers/OnboardingProvider/OnboardingProvider", () => ({
@@ -26,9 +24,7 @@ function resetState() {
     steps: [],
     completedCount: 1,
     total: 4,
-    isComplete: false,
-    dismissed: false,
-    isResolved: true,
+    shouldShowOnboarding: true,
     markDocsRead: vi.fn(),
   };
 }
@@ -39,19 +35,13 @@ afterEach(cleanup);
 const pill = () => screen.queryByText(/Onboarding/);
 
 describe("OnboardingNavPill", () => {
-  it("shows progress while onboarding is in progress", () => {
+  it("shows progress while onboarding should show", () => {
     render(<OnboardingNavPill />);
     expect(pill()).toHaveTextContent("Onboarding · 1/4");
   });
 
-  it("is hidden once onboarding is complete", () => {
-    onboarding.isComplete = true;
-    render(<OnboardingNavPill />);
-    expect(pill()).toBeNull();
-  });
-
-  it("is hidden once onboarding is dismissed", () => {
-    onboarding.dismissed = true;
+  it("is hidden when onboarding should not show", () => {
+    onboarding.shouldShowOnboarding = false;
     render(<OnboardingNavPill />);
     expect(pill()).toBeNull();
   });

src/components/Onboarding/OnboardingNavPill.tsx

@@ -12,10 +12,9 @@ import { useOnboarding } from "@/providers/OnboardingProvider/OnboardingProvider
 import { tracking } from "@/utils/tracking";
 
 export function OnboardingNavPill() {
-  const { completedCount, total, isComplete, dismissed, isResolved } =
-    useOnboarding();
+  const { completedCount, total, shouldShowOnboarding } = useOnboarding();
 
-  if (!isResolved || isComplete || dismissed) {
+  if (!shouldShowOnboarding) {
     return null;
   }
 

src/components/Onboarding/OnboardingWelcome.test.tsx

@@ -0,0 +1,41 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { OnboardingWelcome } from "./OnboardingWelcome";
+
+vi.mock("@tanstack/react-router", () => ({
+  Navigate: ({ to }: { to: string }) => <div data-testid="navigate">{to}</div>,
+  Link: ({ children }: { children: React.ReactNode }) => <a>{children}</a>,
+}));
+
+vi.mock("@/components/Learn/OnboardingHero", () => ({
+  OnboardingHero: () => <div data-testid="hero" />,
+}));
+
+let onboarding = { isResolved: true, shouldShowOnboarding: true };
+vi.mock("@/providers/OnboardingProvider/OnboardingProvider", () => ({
+  useOnboarding: () => onboarding,
+}));
+
+afterEach(cleanup);
+
+describe("OnboardingWelcome", () => {
+  it("shows a spinner until onboarding state is resolved", () => {
+    onboarding = { isResolved: false, shouldShowOnboarding: false };
+    render(<OnboardingWelcome />);
+    expect(screen.queryByTestId("hero")).toBeNull();
+    expect(screen.queryByTestId("navigate")).toBeNull();
+  });
+
+  it("renders the welcome hero when onboarding should show", () => {
+    onboarding = { isResolved: true, shouldShowOnboarding: true };
+    render(<OnboardingWelcome />);
+    expect(screen.getByTestId("hero")).toBeInTheDocument();
+  });
+
+  it("redirects to /dashboard when onboarding should not show", () => {
+    onboarding = { isResolved: true, shouldShowOnboarding: false };
+    render(<OnboardingWelcome />);
+    expect(screen.getByTestId("navigate")).toHaveTextContent("/dashboard");
+  });
+});

src/components/Onboarding/OnboardingWelcome.tsx

@@ -2,14 +2,23 @@ import { Link, Navigate } from "@tanstack/react-router";
 
 import { OnboardingHero } from "@/components/Learn/OnboardingHero";
 import { BlockStack } from "@/components/ui/layout";
+import { Spinner } from "@/components/ui/spinner";
 import { useOnboarding } from "@/providers/OnboardingProvider/OnboardingProvider";
-import { APP_ROUTES } from "@/routes/router";
+import { APP_ROUTES } from "@/routes/appRoutes";
 import { tracking } from "@/utils/tracking";
 
 export function OnboardingWelcome() {
-  const { isReady, isComplete, dismissed } = useOnboarding();
+  const { isResolved, shouldShowOnboarding } = useOnboarding();
 
-  if (isReady && (isComplete || dismissed)) {
+  if (!isResolved) {
+    return (
+      <BlockStack align="center" inlineAlign="center" className="h-full">
+        <Spinner />
+      </BlockStack>
+    );
+  }
+
+  if (!shouldShowOnboarding) {
     return <Navigate to={APP_ROUTES.DASHBOARD} replace />;
   }
 

src/providers/BackendProvider.tsx

@@ -105,6 +105,7 @@ export const BackendProvider = ({ children }: { children: ReactNode }) => {
       if (!normalizedUrl) {
         if (notifyResult) notify("Backend is not configured", "error");
         if (saveAvailability) setAvailable(false);
+        setReady(true);
         return Promise.resolve(false);
       }
       return fetch(`${normalizedUrl}/services/ping`)
@@ -126,6 +127,7 @@ export const BackendProvider = ({ children }: { children: ReactNode }) => {
         .catch(() => {
           if (notifyResult) notify("Backend unavailable", "error");
           if (saveAvailability) setAvailable(false);
+          setReady(true);
           return false;
         });
     },

src/providers/OnboardingProvider/OnboardingProvider.test.tsx

@@ -95,6 +95,17 @@ describe("OnboardingProvider", () => {
     expect(patched()).toBe(false);
   });
 
+  it("does not show onboarding when the backend is unavailable", async () => {
+    backend = { available: false, backendUrl: "https://backend.example" };
+
+    const { result } = render();
+
+    await waitFor(() => expect(result.current.isReady).toBe(true));
+    expect(result.current.isOnboardingAvailable).toBe(false);
+    expect(result.current.shouldShowOnboarding).toBe(false);
+    expect(patched()).toBe(false);
+  });
+
   it("derives tour and run completion live without persisting them", async () => {
     tourCompletions = { "first-pipeline": { completedAt: "x" } };
     runsPayload = { pipeline_runs: [{ id: "run-1" }] };

src/providers/OnboardingProvider/OnboardingProvider.tsx

@@ -44,6 +44,8 @@ interface OnboardingContextValue {
   dismissed: boolean;
   isReady: boolean;
   isResolved: boolean;
+  isOnboardingAvailable: boolean;
+  shouldShowOnboarding: boolean;
   markDocsRead: () => void;
   dismiss: () => void;
   reopen: () => void;
@@ -79,7 +81,13 @@ function useHasMyRun(): {
 export function OnboardingProvider({ children }: { children: ReactNode }) {
   const { track } = useAnalytics();
   const notify = useToastNotification();
-  const { ready: backendReady, configured } = useBackend();
+  const {
+    ready: backendReady,
+    configured,
+    available,
+    backendUrl,
+  } = useBackend();
+  const hasBackend = available && Boolean(backendUrl);
   const { data: progress, isLoading: progressLoading } =
     useOnboardingProgress();
   const persist = usePersistOnboardingProgress();
@@ -100,8 +108,12 @@ export function OnboardingProvider({ children }: { children: ReactNode }) {
   };
 
   const isComplete = ONBOARDING_STEP_IDS.every((id) => desiredSteps[id]);
+  const dismissed = progress?.dismissed ?? false;
   const isReady = !progressLoading && !toursLoading && !runsLoading;
   const isResolved = (backendReady || !configured) && isReady;
+  const isOnboardingAvailable = isResolved && hasBackend;
+  const shouldShowOnboarding =
+    isOnboardingAvailable && !isComplete && !dismissed;
 
   const [pipelineWriteCount, setPipelineWriteCount] = useState(0);
 
@@ -185,9 +197,11 @@ export function OnboardingProvider({ children }: { children: ReactNode }) {
     completedCount: steps.filter((step) => step.completed).length,
     total: steps.length,
     isComplete,
-    dismissed: progress?.dismissed ?? false,
+    dismissed,
     isReady,
     isResolved,
+    isOnboardingAvailable,
+    shouldShowOnboarding,
     markDocsRead,
     dismiss,
     reopen,

src/routes/Dashboard/DashboardLayout.tsx

@@ -59,8 +59,7 @@ export function DashboardLayout() {
   const requiresAuthorization = isAuthorizationRequired();
   const isComponentSearchEnabled = useFlagValue("component-search-v2");
 
-  const { isComplete, dismissed, isResolved } = useOnboarding();
-  const showOnboarding = isResolved && !isComplete && !dismissed;
+  const { shouldShowOnboarding } = useOnboarding();
 
   const baseItems = isComponentSearchEnabled
     ? BASE_SIDEBAR_ITEMS.map((item) =>
@@ -70,11 +69,11 @@ export function DashboardLayout() {
       )
     : BASE_SIDEBAR_ITEMS;
 
-  const sidebarItems: SidebarItem[] = showOnboarding
+  const sidebarItems: SidebarItem[] = shouldShowOnboarding
     ? [
         {
           to: APP_ROUTES.WELCOME,
-          label: "Get started",
+          label: "Get Started",
           icon: "Rocket",
           exact: true,
         },