fux

app/auth/login/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
@@ -8,7 +8,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
 
-export default function LoginPage() {
+// Separate the main login functionality into a client component
+function LoginForm() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -131,4 +132,27 @@ export default function LoginPage() {
       </div>
     </div>
   );
+}
+
+// Simple loading state for the Suspense boundary
+function LoginLoading() {
+  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 text-center">
+        <div className="mt-6 flex flex-col items-center justify-center">
+          <div className="w-12 h-12 border-4 border-t-blue-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading login form...</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Main page component that uses Suspense
+export default function LoginPage() {
+  return (
+    <Suspense fallback={<LoginLoading />}>
+      <LoginForm />
+    </Suspense>
+  );
 }