Finish up loading states

frontend/src/app/new-onboarding/components/onboarding-content.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { StickToBottom } from "use-stick-to-bottom";
 import { AssistantMessage } from "@/app/chat/components/assistant-message";
 import { UserMessage } from "@/app/chat/components/user-message";
@@ -59,6 +59,12 @@ export function OnboardingContent({
 	// Determine which message to show (streaming takes precedence)
 	const displayMessage = streamingMessage || assistantMessage;
 
+	useEffect(() => {
+		if (currentStep === 1 && !isLoading && !!displayMessage) {
+			handleStepComplete();
+		}
+	}, [isLoading, displayMessage, handleStepComplete]);
+
 	return (
 		<StickToBottom
 			className="flex h-full flex-1 flex-col"
@@ -68,6 +74,7 @@ export function OnboardingContent({
 		>
 			<StickToBottom.Content className="flex flex-col min-h-full overflow-x-hidden px-8 py-6">
 				<div className="flex flex-col place-self-center w-full space-y-6">
+					{/* Step 1 */}
 					<OnboardingStep
 						isVisible={currentStep >= 0}
 						isCompleted={currentStep > 0}
@@ -76,6 +83,7 @@ export function OnboardingContent({
 						<OnboardingCard onComplete={handleStepComplete} />
 					</OnboardingStep>
 
+					{/* Step 2 */}
 					<OnboardingStep
 						isVisible={currentStep >= 1}
 						isCompleted={currentStep > 1 || !!selectedNudge}
@@ -94,7 +102,7 @@ export function OnboardingContent({
 					{currentStep >= 1 && !!selectedNudge && (
 						<UserMessage
 							content={selectedNudge}
-							isCompleted={currentStep > 1}
+							isCompleted={currentStep > 2}
 						/>
 					)}
 
@@ -109,13 +117,13 @@ export function OnboardingContent({
 								expandedFunctionCalls={new Set()}
 								onToggle={() => {}}
 								isStreaming={!!streamingMessage}
-								isCompleted={currentStep > 1}
+								isCompleted={currentStep > 2}
 							/>
 						)}
 					
-					{/* Still kind of part of step 2 */}
+					{/* Step 3 */}
 					<OnboardingStep
-						isVisible={currentStep === 1 && !isLoading && !!displayMessage}
+						isVisible={currentStep >= 2 && !isLoading && !!displayMessage}
 						isCompleted={currentStep > 2}
 						text="Now, let's add your data."
 						hideIcon={true}
@@ -123,9 +131,10 @@ export function OnboardingContent({
 						<OnboardingUpload onComplete={handleStepComplete} />
 					</OnboardingStep>
 
+					{/* Step 4 */}
 					<OnboardingStep
-						isVisible={currentStep >= 2}
+						isVisible={currentStep >= 3}
-						isCompleted={currentStep > 2}
+						isCompleted={currentStep > 3}
 						text="Step 3: You're all set!"
 					>
 						<div className="space-y-4">

frontend/src/app/new-onboarding/components/onboarding-upload.tsx

@@ -1,6 +1,8 @@
 import { ChangeEvent, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { duplicateCheck, uploadFile } from "@/lib/upload-utils";
+import { AnimatePresence, motion } from "motion/react";
+import { AnimatedProviderSteps } from "@/app/onboarding/components/animated-provider-steps";
 
 interface OnboardingUploadProps {
   onComplete: () => void;
@@ -9,6 +11,12 @@ interface OnboardingUploadProps {
 const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
+  const [currentStep, setCurrentStep] = useState<number | null>(null);
+
+  const STEP_LIST = [
+    "Analyzing your document",
+    "Ingesting your document",
+  ];
 
   const resetFileInput = () => {
     if (fileInputRef.current) {
@@ -24,12 +32,14 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
   const performUpload = async (file: File, replace = false) => {
     setIsUploading(true);
     try {
+      setCurrentStep(1);
       await uploadFile(file, replace);
       console.log("Document uploaded successfully");
     } catch (error) {
       console.error("Upload failed", (error as Error).message);
     } finally {
       setIsUploading(false);
+      setCurrentStep(STEP_LIST.length);
       onComplete();
     }
   };
@@ -42,6 +52,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
     }
 
     try {
+      setCurrentStep(0);
       const duplicateInfo = await duplicateCheck(selectedFile);
       if (duplicateInfo.exists) {
         console.log("Duplicate file detected");
@@ -58,23 +69,45 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
 
 
   return (
-    <div className="space-y-4">
+    <AnimatePresence mode="wait">
-      <Button
+      {currentStep === null ? (
-        size="sm"
+        <motion.div
-        variant="outline"
+          key="user-ingest"
-        onClick={handleUploadClick}
+          initial={{ opacity: 1, y: 0 }}
-        disabled={isUploading}
+          exit={{ opacity: 0, y: -24 }}
-      >
+          transition={{ duration: 0.4, ease: "easeInOut" }}
-        {isUploading ? "Uploading..." : "Add a Document"}
+        >
-      </Button>
+          <Button
-      <input
+            size="sm"
-        ref={fileInputRef}
+            variant="outline"
-        type="file"
+            onClick={handleUploadClick}
-        onChange={handleFileChange}
+            disabled={isUploading}
-        className="hidden"
+          >
-        accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
+            {isUploading ? "Uploading..." : "Add a Document"}
-      />
+          </Button>
-    </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            onChange={handleFileChange}
+            className="hidden"
+            accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
+          />
+        </motion.div>
+      ) : (
+        <motion.div
+          key="ingest-steps"
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, ease: "easeInOut" }}
+        >
+          <AnimatedProviderSteps
+            currentStep={currentStep}
+            setCurrentStep={setCurrentStep}
+            steps={STEP_LIST}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }
 

frontend/src/app/onboarding/components/animated-provider-steps.tsx

@@ -9,16 +9,12 @@ import { cn } from "@/lib/utils";
 export function AnimatedProviderSteps({
   currentStep,
   setCurrentStep,
+  steps,
 }: {
   currentStep: number;
   setCurrentStep: (step: number) => void;
+  steps: string[];
 }) {
-  const steps = [
-    "Setting up your model provider",
-    "Defining schema",
-    "Configuring Langflow",
-    "Ingesting sample data",
-  ];
 
   useEffect(() => {
     if (currentStep < steps.length - 1) {
@@ -27,7 +23,7 @@ export function AnimatedProviderSteps({
       }, 1000);
       return () => clearInterval(interval);
     }
-  }, [currentStep, setCurrentStep]);
+  }, [currentStep, setCurrentStep, steps]);
 
   const isDone = currentStep >= steps.length;
 

frontend/src/app/onboarding/components/onboarding-card.tsx

@@ -34,7 +34,15 @@ interface OnboardingCardProps {
   onComplete: () => void;
 }
 
-const TOTAL_PROVIDER_STEPS = 4;
+
+const STEP_LIST = [
+  "Setting up your model provider",
+  "Defining schema",
+  "Configuring Langflow",
+  "Ingesting sample data",
+];
+
+const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
 
 const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
   const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true";
@@ -245,6 +253,7 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
           <AnimatedProviderSteps
             currentStep={currentStep}
             setCurrentStep={setCurrentStep}
+            steps={STEP_LIST}
           />
         </motion.div>
       )}