erm what the sigma

app/auth/login/components/LoginForm.tsx

@@ -1,17 +1,20 @@
 "use client"
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
 
 export default function LoginForm() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  const redirectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const router = useRouter();
   const searchParams = useSearchParams();
   const redirectUrl = searchParams.get("redirectUrl") || "/dashboard";
@@ -28,6 +31,15 @@ export default function LoginForm() {
     }
   }, [router]);
 
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (redirectTimeoutRef.current) {
+        clearTimeout(redirectTimeoutRef.current);
+      }
+    };
+  }, []);
+
   async function handleLogin(e: React.FormEvent) {
     e.preventDefault();
     setIsLoading(true);
@@ -57,10 +69,19 @@ export default function LoginForm() {
         document.cookie = `Authorization=${data.token}; path=/; Secure; SameSite=Strict; max-age=604800`;
         localStorage.setItem("Authorization", data.token);
         
+        // Show success notification
         toast.success("Login successful");
         
-        // Redirect to dashboard or the original redirect URL
+        // Set success state for animation
+        setLoginSuccess(true);
+        
+        // Try Next.js router navigation
         router.push(redirectUrl);
+        
+        // Set up a fallback manual redirect if Next.js navigation doesn't work
+        redirectTimeoutRef.current = setTimeout(() => {
+          window.location.href = redirectUrl;
+        }, 1500); // Wait 1.5 seconds before trying manual redirect
       } else {
         // Handle HTTP error responses
         const errorMessage = data.error || data.message || data.details || "Invalid credentials";
@@ -68,20 +89,20 @@ export default function LoginForm() {
           description: errorMessage,
         });
         console.error("Login error response:", { status: response.status, data });
+        setIsLoading(false);
       }
     } catch (error) {
       toast.error("Connection Error", {
         description: "Unable to connect to the server. Please check your internet connection and try again.",
       });
       console.error("Login network error:", error);
-    } finally {
       setIsLoading(false);
     }
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
-      <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg">
+    <div className={`flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12] transition-opacity duration-300 ${loginSuccess ? 'opacity-0' : 'opacity-100'}`}>
+      <div className={`w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg transition-all duration-300 ${loginSuccess ? 'scale-95 opacity-0' : 'scale-100 opacity-100'} ${isLoading && !loginSuccess ? 'animate-pulse' : ''}`}>
         <div className="text-center">
           <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Welcome back</h2>
           <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Please sign in to your account</p>
@@ -89,7 +110,7 @@ export default function LoginForm() {
 
         <form className="mt-8 space-y-6" onSubmit={handleLogin}>
           <div className="space-y-4">
-            <div>
+            <div className="animate-in fade-in duration-500">
               <Label htmlFor="username">Username</Label>
               <Input
                 id="username"
@@ -100,9 +121,10 @@ export default function LoginForm() {
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
                 className="mt-1"
+                disabled={isLoading || loginSuccess}
               />
             </div>
-            <div>
+            <div className="animate-in fade-in duration-500 delay-150">
               <Label htmlFor="password">Password</Label>
               <Input
                 id="password"
@@ -113,16 +135,32 @@ export default function LoginForm() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className="mt-1"
+                disabled={isLoading || loginSuccess}
               />
             </div>
           </div>
 
-          <Button type="submit" className="w-full" disabled={isLoading}>
-            {isLoading ? "Signing in..." : "Sign in"}
+          <Button 
+            type="submit" 
+            className={`w-full animate-in fade-in-50 duration-500 delay-300 ${loginSuccess ? 'bg-green-600 hover:bg-green-700' : ''}`} 
+            disabled={isLoading || loginSuccess}
+          >
+            {isLoading ? (
+              <span className="flex items-center justify-center">
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Signing in...
+              </span>
+            ) : loginSuccess ? (
+              <span className="flex items-center justify-center">
+                Redirecting...
+              </span>
+            ) : (
+              "Sign in"
+            )}
           </Button>
         </form>
 
-        <p className="mt-10 text-sm text-center text-gray-600 dark:text-gray-400">
+        <p className="mt-10 text-sm text-center text-gray-600 dark:text-gray-400 animate-in fade-in duration-500 delay-500">
           Don't have an account?{" "}
           <Link href="/auth/register" className="text-blue-600 hover:underline dark:text-blue-400">
             Sign up