feat: add loading states and visual feedback for onboarding steps

itstauq · itstauq · commit 742f4e353993 · 2025-06-24T23:48:57.000+05:30
diff --git a/src-frontend/components/onboarding/configure-step.tsx b/src-frontend/components/onboarding/configure-step.tsx
@@ -1,4 +1,5 @@
-import { ArrowLeft, ArrowRight, Folder } from "lucide-react";
+import { ArrowLeft, ArrowRight, Folder, Loader2 } from "lucide-react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   FormControl,
@@ -25,6 +26,7 @@ interface ConfigureStepProps {
 
 export function ConfigureStep({ onNext, onBack }: ConfigureStepProps) {
   const { control, getValues, setValue, trigger } = useFormContext();
+  const [isConfiguring, setIsConfiguring] = useState(false);
 
   const handleDirectorySelect = async () => {
     if (typeof window === "undefined" || !window.__TAURI__) return;
@@ -41,7 +43,14 @@ export function ConfigureStep({ onNext, onBack }: ConfigureStepProps) {
   const handleConfigureClient = async () => {
     const isValid = await trigger(["dataDir", "serverUrl"]);
     if (isValid) {
-      onNext();
+      setIsConfiguring(true);
+      try {
+        // Simulate some configuration time or add actual configuration logic here
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        onNext();
+      } finally {
+        setIsConfiguring(false);
+      }
     }
   };
 
@@ -81,6 +90,7 @@ export function ConfigureStep({ onNext, onBack }: ConfigureStepProps) {
                     variant="outline"
                     onClick={handleDirectorySelect}
                     type="button"
+                    disabled={isConfiguring}
                   >
                     <Folder className="mr-2 h-4 w-4" />
                     Browse
@@ -113,14 +123,32 @@ export function ConfigureStep({ onNext, onBack }: ConfigureStepProps) {
       </CardContent>
 
       <CardFooter className="flex justify-between">
-        <Button variant="outline" className="cursor-pointer" onClick={onBack}>
+        <Button
+          variant="outline"
+          className="cursor-pointer"
+          onClick={onBack}
+          disabled={isConfiguring}
+        >
           <ArrowLeft className="mr-2 h-4 w-4" />
           Back
         </Button>
 
-        <Button className="cursor-pointer" onClick={handleConfigureClient}>
-          Next
-          <ArrowRight className="ml-2 h-4 w-4" />
+        <Button
+          className="cursor-pointer"
+          onClick={handleConfigureClient}
+          disabled={isConfiguring}
+        >
+          {isConfiguring ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Configuring...
+            </>
+          ) : (
+            <>
+              Next
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </>
+          )}
         </Button>
       </CardFooter>
     </Card>
diff --git a/src-frontend/components/onboarding/connect-step.tsx b/src-frontend/components/onboarding/connect-step.tsx
@@ -41,6 +41,7 @@ export function ConnectStep({
   setIsLoading,
 }: ConnectStepProps) {
   const [showToken, setShowToken] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
   const { updateSettings, status, datasite, connect, settings } =
     useConnectionStore();
 
@@ -58,34 +59,39 @@ export function ConnectStep({
   }, [settings.url, settings.token, form]);
 
   const handleConnectDaemon = async (values: ConnectionFormValues) => {
+    setIsConnecting(true);
     setIsLoading(true);
 
-    // Update connection settings from form values
-    updateSettings({
-      url: values.url,
-      token: values.token,
-    });
+    try {
+      // Update connection settings from form values
+      updateSettings({
+        url: values.url,
+        token: values.token,
+      });
 
-    // Attempt connection
-    const result = await connect();
-    setIsLoading(false);
+      // Attempt connection
+      const result = await connect();
 
-    // Error handling
-    if (result.success) {
-      if (isConfigValid(datasite?.status)) {
-        onComplete();
+      // Error handling
+      if (result.success) {
+        if (isConfigValid(datasite?.status)) {
+          onComplete();
+        } else {
+          onNext();
+        }
       } else {
-        onNext();
+        Object.entries(result.errors).forEach(([key, value]) => {
+          if (value && key in values) {
+            form.setError(key as keyof ConnectionFormValues, {
+              type: "manual",
+              message: value,
+            });
+          }
+        });
       }
-    } else {
-      Object.entries(result.errors).forEach(([key, value]) => {
-        if (value && key in values) {
-          form.setError(key as keyof ConnectionFormValues, {
-            type: "manual",
-            message: value,
-          });
-        }
-      });
+    } finally {
+      setIsConnecting(false);
+      setIsLoading(false);
     }
   };
 
@@ -164,9 +170,9 @@ export function ConnectStep({
             <Button
               type="submit"
               className="w-full cursor-pointer"
-              disabled={isLoading || status === "connecting"}
+              disabled={isLoading || status === "connecting" || isConnecting}
             >
-              {isLoading || status === "connecting" ? (
+              {isLoading || status === "connecting" || isConnecting ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   Connecting...
diff --git a/src-frontend/components/onboarding/email-step.tsx b/src-frontend/components/onboarding/email-step.tsx
@@ -1,5 +1,5 @@
 import { useFormContext } from "react-hook-form";
-import { ArrowLeft, ArrowRight, Mail } from "lucide-react";
+import { ArrowLeft, ArrowRight, Mail, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   FormControl,
@@ -22,6 +22,7 @@ import { toast } from "@/hooks/use-toast";
 import { GoogleIcon } from "@/components/logo/google-icon";
 import { GithubIcon } from "@/components/logo/github-icon";
 import { useConnectionStore } from "@/stores";
+import { useState } from "react";
 
 interface EmailStepProps {
   onNext: (email: string) => void;
@@ -31,6 +32,7 @@ interface EmailStepProps {
 
 export function EmailStep({ onNext, onBack, isLoading }: EmailStepProps) {
   const { control, getValues, trigger, resetField } = useFormContext();
+  const [isSendingCode, setIsSendingCode] = useState(false);
   const {
     settings: { url, token },
   } = useConnectionStore();
@@ -50,28 +52,34 @@ export function EmailStep({ onNext, onBack, isLoading }: EmailStepProps) {
     const isValid = await trigger(["email"]);
     if (!isValid) return;
 
-    // Clear the token field in the form
-    resetField("token");
+    setIsSendingCode(true);
 
-    const response = await fetch(
-      `${url}/v1/init/token?email=${getValues("email")}&server_url=${getValues("serverUrl")}`,
-      {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
+    try {
+      // Clear the token field in the form
+      resetField("token");
+
+      const response = await fetch(
+        `${url}/v1/init/token?email=${getValues("email")}&server_url=${getValues("serverUrl")}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
         },
-      },
-    );
-    if (!response.ok) {
-      const data = await response.json();
-      toast({
-        icon: "❌",
-        title: "Error",
-        description: `Failed to send verification code. Error: ${data.message}`,
-      });
-      return;
+      );
+      if (!response.ok) {
+        const data = await response.json();
+        toast({
+          icon: "❌",
+          title: "Error",
+          description: `Failed to send verification code. Error: ${data.message}`,
+        });
+        return;
+      }
+      onNext();
+    } finally {
+      setIsSendingCode(false);
     }
-    onNext();
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -103,7 +111,7 @@ export function EmailStep({ onNext, onBack, isLoading }: EmailStepProps) {
           variant="outline"
           className="w-full cursor-pointer"
           onClick={() => handleOAuthLogin("Google")}
-          disabled={isLoading}
+          disabled={isLoading || isSendingCode}
           type="button"
         >
           <GoogleIcon className="mr-2 h-4 w-4" />
@@ -113,7 +121,7 @@ export function EmailStep({ onNext, onBack, isLoading }: EmailStepProps) {
           variant="outline"
           className="w-full cursor-pointer"
           onClick={() => handleOAuthLogin("GitHub")}
-          disabled={isLoading}
+          disabled={isLoading || isSendingCode}
           type="button"
         >
           <GithubIcon className="mr-2 h-4 w-4" />
@@ -143,7 +151,7 @@ export function EmailStep({ onNext, onBack, isLoading }: EmailStepProps) {
                     placeholder="you@example.com"
                     className="h-11 pl-10"
                     onKeyDown={handleKeyDown}
-                    disabled={isLoading}
+                    disabled={isLoading || isSendingCode}
                     {...field}
                   />
                 </div>
@@ -162,18 +170,27 @@ export function EmailStep({ onNext, onBack, isLoading }: EmailStepProps) {
           variant="outline"
           className="cursor-pointer"
           onClick={onBack}
-          disabled={isLoading}
+          disabled={isLoading || isSendingCode}
         >
           <ArrowLeft className="mr-2 h-4 w-4" />
           Back
         </Button>
         <Button
           className="cursor-pointer"
           onClick={handleEmailLogin}
-          disabled={isLoading}
+          disabled={isLoading || isSendingCode}
         >
-          Continue with Email
-          <ArrowRight className="ml-2 h-4 w-4" />
+          {isLoading || isSendingCode ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Sending Code...
+            </>
+          ) : (
+            <>
+              Continue with Email
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </>
+          )}
         </Button>
       </CardFooter>
     </Card>
diff --git a/src-frontend/components/onboarding/verify-step.tsx b/src-frontend/components/onboarding/verify-step.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/card";
 import { useConnectionStore } from "@/stores";
 import { toast } from "@/hooks/use-toast";
+import { useState } from "react";
 
 interface VerifyStepProps {
   onComplete: () => void;
@@ -29,6 +30,7 @@ interface VerifyStepProps {
 
 export function VerifyStep({ onComplete, onBack, isLoading }: VerifyStepProps) {
   const { control, getValues, trigger } = useFormContext();
+  const [isVerifying, setIsVerifying] = useState(false);
   const {
     settings: { url, token },
   } = useConnectionStore();
@@ -37,31 +39,37 @@ export function VerifyStep({ onComplete, onBack, isLoading }: VerifyStepProps) {
     const isValid = await trigger(["token"]);
     if (!isValid) return;
 
-    const response = await fetch(`${url}/v1/init/datasite`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify({
-        dataDir: getValues("dataDir"),
-        email: getValues("email"),
-        serverUrl: getValues("serverUrl"),
-        token: getValues("token"),
-      }),
-    });
+    setIsVerifying(true);
 
-    if (!response.ok) {
-      toast({
-        icon: "❌",
-        variant: "destructive",
-        title: "Failed to verify email",
-        description: "Please try again",
+    try {
+      const response = await fetch(`${url}/v1/init/datasite`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          dataDir: getValues("dataDir"),
+          email: getValues("email"),
+          serverUrl: getValues("serverUrl"),
+          token: getValues("token"),
+        }),
       });
-      return;
-    }
 
-    onComplete();
+      if (!response.ok) {
+        toast({
+          icon: "❌",
+          variant: "destructive",
+          title: "Failed to verify email",
+          description: "Please try again",
+        });
+        return;
+      }
+
+      onComplete();
+    } finally {
+      setIsVerifying(false);
+    }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -111,17 +119,17 @@ export function VerifyStep({ onComplete, onBack, isLoading }: VerifyStepProps) {
           variant="outline"
           className="cursor-pointer"
           onClick={onBack}
-          disabled={isLoading}
+          disabled={isLoading || isVerifying}
         >
           <ArrowLeft className="mr-2 h-4 w-4" />
           Back
         </Button>
         <Button
           className="cursor-pointer"
-          disabled={isLoading}
+          disabled={isLoading || isVerifying}
           onClick={handleCompleteSetup}
         >
-          {isLoading ? (
+          {isLoading || isVerifying ? (
             <>
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               Verifying...
