feat(web): enhance onboarding flow for returning users and add loading state handling

Author: tyler-dane

packages/web/src/views/Onboarding/OnboardingFlow.test.tsx

@@ -64,17 +64,19 @@ describe("OnboardingFlow", () => {
   });
 
   describe("Returning User Flow", () => {
-    it("shows login flow first even for returning users", () => {
+    it("skips login flow and goes directly to sign-in-with-google for returning users", () => {
       mockUseHasCompletedSignup.mockReturnValue({
         hasCompletedSignup: true,
         markSignupCompleted: jest.fn(),
       });
 
       render(<OnboardingFlow />);
 
-      // First step should still be login/waitlist
+      // Should skip login steps and go directly to main onboarding
       expect(screen.getByTestId("onboarding")).toBeInTheDocument();
-      expect(screen.getByTestId("first-step-id")).toHaveTextContent("welcome");
+      expect(screen.getByTestId("first-step-id")).toHaveTextContent(
+        "sign-in-with-google",
+      );
     });
 
     it("calls useHasCompletedSignup to check signup status", () => {
@@ -88,6 +90,18 @@ describe("OnboardingFlow", () => {
       // Hook should be called to determine which step to start at
       expect(mockUseHasCompletedSignup).toHaveBeenCalled();
     });
+
+    it("waits for hasCompletedSignup to load before rendering", () => {
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: null,
+        markSignupCompleted: jest.fn(),
+      });
+
+      const { container } = render(<OnboardingFlow />);
+
+      // Should render nothing while loading
+      expect(container.firstChild).toBeNull();
+    });
   });
 
   describe("Mobile Flow", () => {

packages/web/src/views/Onboarding/OnboardingFlow.tsx

@@ -167,9 +167,14 @@ const _OnboardingFlow: React.FC = () => {
   ];
 
   // Initially hide the steps until the user logs in
+  // For returning users, show the steps immediately
   useEffect(() => {
-    setHideSteps(true);
-  }, [setHideSteps]);
+    if (hasCompletedSignup) {
+      setHideSteps(false);
+    } else {
+      setHideSteps(true);
+    }
+  }, [setHideSteps, hasCompletedSignup]);
 
   // Show mobile flow if on mobile device
   if (isMobile) {
@@ -184,19 +189,6 @@ const _OnboardingFlow: React.FC = () => {
     );
   }
 
-  if (!showOnboarding) {
-    return (
-      <Onboarding
-        key="login-onboarding"
-        steps={loginSteps}
-        onComplete={() => {
-          setShowOnboarding(true);
-          setHideSteps(false);
-        }}
-      />
-    );
-  }
-
   // Determine initial step based on signup status
   // If user has completed signup before, skip welcome screens and start at sign-in-with-google
   const getInitialStepIndex = () => {
@@ -210,6 +202,25 @@ const _OnboardingFlow: React.FC = () => {
     return 0; // Start from beginning for new users
   };
 
+  // Wait for hasCompletedSignup to load before showing anything
+  if (hasCompletedSignup === null) {
+    return null;
+  }
+
+  // For returning users (hasCompletedSignup = true), skip login steps and go directly to main onboarding
+  if (!showOnboarding && !hasCompletedSignup) {
+    return (
+      <Onboarding
+        key="login-onboarding"
+        steps={loginSteps}
+        onComplete={() => {
+          setShowOnboarding(true);
+          setHideSteps(false);
+        }}
+      />
+    );
+  }
+
   return (
     <Onboarding
       key="main-onboarding"