Logain init validation | Loading Spinner

app/LoginPage.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import Image from "next/image"
+import Link from "next/link"
+
+export default function LoginPage() {
+    
+  return (
+    <div className="min-h-screen flex flex-col lg:flex-row">
+      <div className="flex-1 flex items-center justify-center p-6 lg:p-10">
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold">Welcome back</h1>
+            <p className="mt-2 text-gray-600">Please login with your account</p>
+          </div>
+
+          <form className="mt-8 space-y-6">
+            <div className="form-control w-full">
+              <label className="label">
+                <span className="label-text">Email</span>
+              </label>
+              <input type="email" placeholder="email@example.com" className="input input-bordered w-full" required />
+            </div>
+
+            <div className="form-control w-full">
+              <label className="label">
+                <span className="label-text">Password</span>
+              </label>
+              <input type="password" placeholder="Your password" className="input input-bordered w-full" required />
+              <label className="label">
+                <span className="label-text-alt"></span>
+                <Link href="/forgot-password" className="label-text-alt link link-hover">
+                  Forgot password?
+                </Link>
+              </label>
+            </div>
+
+            <div className="form-control">
+              <label className="label cursor-pointer justify-start gap-2">
+                <input type="checkbox" className="checkbox checkbox-primary" />
+                <span className="label-text">Stay logged in</span>
+              </label>
+            </div>
+
+            <button className="btn btn-primary w-full">Login</button>
+          </form>
+        </div>
+      </div>
+
+      <div className="flex-1 bg-base-200 hidden lg:block">
+        <div className="h-full w-full relative">
+          <Image
+            src="/login_wallpaper.jpg"
+            alt="Login Illustration"
+            fill
+            className="object-cover"
+            priority
+          />
+        </div>
+      </div>
+
+      <div className="h-48 bg-base-200 relative lg:hidden">
+        <Image
+          src="/login_wallpaper.jpg"
+          alt="Login Illustration"
+          fill
+          className="object-cover"
+          priority
+        />
+      </div>
+    </div>
+  )
+}

app/page.tsx

@@ -1,88 +1,31 @@
 "use client";
 
-import Image from "next/image"
+import LoginPage from "./LoginPage";
-import Link from "next/link"
+import Loading from "@/components/Loading";
 
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import axios from "axios";
 
 export default function Login() {
   const router = useRouter();
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const init = async () => {
       const response = await axios.get("/api/user/init");
       if (response.data.message === "No users found") {
         router.push("/setup");
+      } else {
+        setLoading(false);
       }
     };
     init();
   }, []);
 
-  return (
+  if (loading) {
-    <div className="min-h-screen flex flex-col lg:flex-row">
+    return <Loading />;
-      <div className="flex-1 flex items-center justify-center p-6 lg:p-10">
+  } else {
-        <div className="w-full max-w-md space-y-8">
+    return <LoginPage />;
-          <div className="text-center">
+  }
-            <h1 className="text-3xl font-bold">Welcome back</h1>
-            <p className="mt-2 text-gray-600">Please login with your account</p>
-          </div>
-
-          <form className="mt-8 space-y-6">
-            <div className="form-control w-full">
-              <label className="label">
-                <span className="label-text">Email</span>
-              </label>
-              <input type="email" placeholder="email@example.com" className="input input-bordered w-full" required />
-            </div>
-
-            <div className="form-control w-full">
-              <label className="label">
-                <span className="label-text">Password</span>
-              </label>
-              <input type="password" placeholder="Your password" className="input input-bordered w-full" required />
-              <label className="label">
-                <span className="label-text-alt"></span>
-                <Link href="/forgot-password" className="label-text-alt link link-hover">
-                  Forgot password?
-                </Link>
-              </label>
-            </div>
-
-            <div className="form-control">
-              <label className="label cursor-pointer justify-start gap-2">
-                <input type="checkbox" className="checkbox checkbox-primary" />
-                <span className="label-text">Stay logged in</span>
-              </label>
-            </div>
-
-            <button className="btn btn-primary w-full">Login</button>
-          </form>
-        </div>
-      </div>
-
-      <div className="flex-1 bg-base-200 hidden lg:block">
-        <div className="h-full w-full relative">
-          <Image
-            src="/login_wallpaper.jpg"
-            alt="Login Illustration"
-            fill
-            className="object-cover"
-            priority
-          />
-        </div>
-      </div>
-
-      <div className="h-48 bg-base-200 relative lg:hidden">
-        <Image
-          src="/login_wallpaper.jpg"
-          alt="Login Illustration"
-          fill
-          className="object-cover"
-          priority
-        />
-      </div>
-    </div>
-  )
 }

components/Loading.tsx

@@ -0,0 +1,8 @@
+
+export default function Loading() {
+    return (
+        <div className="flex items-center justify-center h-screen">
+            <span className="loading loading-ring loading-xl"></span>
+        </div>
+    );
+}