4c15f433d9
All checks were successful
Build Frontend / build (push) Successful in 1m9s
Added useEffect to prefetch the /dashboard route when the login page loads, improving navigation speed after login.
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import React, { Suspense, lazy, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
|
|
// Use lazy loading for the form component
|
|
const LoginForm = lazy(() => import('./components/LoginForm'));
|
|
|
|
// Background Component
|
|
const AuthBackground = () => (
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div className="absolute inset-0 bg-black" />
|
|
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-transparent" />
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl opacity-50 animate-pulse" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl opacity-50 animate-pulse delay-1000" />
|
|
</div>
|
|
);
|
|
|
|
// Loading State
|
|
function LoginLoading() {
|
|
return (
|
|
<div className="w-full max-w-md p-8 space-y-8 bg-black/40 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl text-center relative z-10">
|
|
<div className="mt-6 flex flex-col items-center justify-center">
|
|
<div className="w-12 h-12 border-4 border-t-indigo-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
|
|
<p className="mt-4 text-zinc-400">Loading secure login...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Main page component
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
router.prefetch("/dashboard");
|
|
}, [router]);
|
|
|
|
return (
|
|
<div className="relative flex items-center justify-center min-h-screen overflow-hidden">
|
|
<AuthBackground />
|
|
<div className="flex flex-col items-center w-full px-4">
|
|
<Suspense fallback={<LoginLoading />}>
|
|
<LoginForm />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |