fix(nav): improve navigation for authorization routes

components/AuthInitializer.tsx

@@ -9,32 +9,41 @@ export default function AuthInitializer({
 }: {
   children: React.ReactNode;
 }) {
-  const { initializeAuth, isLoading, token } = useAuthStore();
+  const { initializeAuth, token, hydrated } = useAuthStore();
   const router = useRouter();
   const pathname = usePathname();
 
+  // 1️⃣ Run initialization once
   useEffect(() => {
-    const run = async () => {
-      await initializeAuth();
+    initializeAuth();
+  }, [initializeAuth]);
 
-      // Routing logic based on auth state
-      const publicPages = ["/", "/login", "/register"];
+  // 2️⃣ Run routing logic only after hydration
+  useEffect(() => {
+    if (!hydrated) return;
 
-      if (token) {
-        if (publicPages.includes(pathname)) {
-          router.replace("/home");
-        }
-      } else {
-        if (!publicPages.includes(pathname)) {
-          router.replace("/");
-        }
+    const publicPages = ["/", "/login", "/register"];
+
+    if (token) {
+      if (publicPages.includes(pathname)) {
+        router.replace("/home");
       }
-    };
+    } else {
+      if (!publicPages.includes(pathname)) {
+        router.replace("/login");
+      }
+    }
+  }, [pathname, token, hydrated, router]);
 
-    run();
-  }, [pathname, token, initializeAuth, router]);
-
-  if (isLoading) return <p>Loading...</p>;
+  // 3️⃣ Show loading until hydrated
+  if (!hydrated) {
+    return (
+      <div className="min-h-screen flex flex-col justify-center items-center gap-3">
+        <div className="animate-spin rounded-full h-20 w-20 border-b-2 border-blue-500"></div>
+        <p className="text-2xl font-semibold tracking-tighter">Loading...</p>
+      </div>
+    );
+  }
 
   return <>{children}</>;
 }