From 1509e8d50251d4ac706584d54b01302a24fec736 Mon Sep 17 00:00:00 2001
From: Harshith Mullapudi <harshithmullapudi@gmail.com>
Date: Mon, 22 Sep 2025 22:26:18 +0530
Subject: [PATCH] fix: show loading in onboarding form

---
 .../onboarding/onboarding-question.tsx        |  3 +++
 apps/webapp/app/routes/onboarding.tsx         | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/onboarding/onboarding-question.tsx b/apps/webapp/app/components/onboarding/onboarding-question.tsx
index 9bf4b50..85c35a6 100644
--- a/apps/webapp/app/components/onboarding/onboarding-question.tsx
+++ b/apps/webapp/app/components/onboarding/onboarding-question.tsx
@@ -15,6 +15,7 @@ interface OnboardingQuestionProps {
   isLast: boolean;
   currentStep: number;
   totalSteps: number;
+  loading?: boolean;
 }
 
 export default function OnboardingQuestionComponent({
@@ -27,6 +28,7 @@ export default function OnboardingQuestionComponent({
   isLast,
   currentStep,
   totalSteps,
+  loading,
 }: OnboardingQuestionProps) {
   const [selectedValue, setSelectedValue] = useState<string | string[]>(
     answer || (question.type === "multi-select" ? [] : ""),
@@ -148,6 +150,7 @@ export default function OnboardingQuestionComponent({
                 variant="secondary"
                 size="xl"
                 onClick={onNext}
+                isLoading={!!loading}
                 disabled={!isValid()}
                 className="rounded-lg px-4 py-2"
               >
diff --git a/apps/webapp/app/routes/onboarding.tsx b/apps/webapp/app/routes/onboarding.tsx
index fd05818..4219734 100644
--- a/apps/webapp/app/routes/onboarding.tsx
+++ b/apps/webapp/app/routes/onboarding.tsx
@@ -85,7 +85,7 @@ export async function action({ request }: ActionFunctionArgs) {
 export default function Onboarding() {
   const { user } = useLoaderData<typeof loader>();
   const submit = useSubmit();
-
+  const [loading, setLoading] = useState(false); // Add loading state
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [answers, setAnswers] = useState<OnboardingAnswer[]>([]);
   // Initialize with default identity statement converted to triplets
@@ -152,6 +152,7 @@ export default function Onboarding() {
     if (currentQuestion < ONBOARDING_QUESTIONS.length - 1) {
       setCurrentQuestion(currentQuestion + 1);
     } else {
+      setLoading(true);
       // Submit all answers
       submitAnswers();
     }
@@ -164,12 +165,17 @@ export default function Onboarding() {
   };
 
   const submitAnswers = async () => {
-    const formData = new FormData();
-    formData.append("answers", JSON.stringify(answers));
+    try {
+      const formData = new FormData();
+      formData.append("answers", JSON.stringify(answers));
 
-    submit(formData, {
-      method: "POST",
-    });
+      submit(formData, {
+        method: "POST",
+      });
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+    }
   };
 
   // Convert episode and statements structure to triplets for visualization
@@ -243,6 +249,7 @@ export default function Onboarding() {
               onAnswer={handleAnswer}
               onNext={handleNext}
               onPrevious={handlePrevious}
+              loading={loading}
               isFirst={currentQuestion === 0}
               isLast={currentQuestion === ONBOARDING_QUESTIONS.length - 1}
               currentStep={currentQuestion + 1}