From d20c9c27885c0baf7b2c817eebd57f2897c47d03 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Mar 2026 03:16:47 +0530
Subject: [PATCH] refactor: enhance button styles in LocalLoginForm and
 RegisterPage components for better loading state visibility

---
 .../app/(home)/login/LocalLoginForm.tsx          |  9 +++++++--
 surfsense_web/app/(home)/register/page.tsx       | 16 +++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/surfsense_web/app/(home)/login/LocalLoginForm.tsx b/surfsense_web/app/(home)/login/LocalLoginForm.tsx
index 5b5147926..ad649848f 100644
--- a/surfsense_web/app/(home)/login/LocalLoginForm.tsx
+++ b/surfsense_web/app/(home)/login/LocalLoginForm.tsx
@@ -211,9 +211,14 @@ export function LocalLoginForm() {
 				<button
 					type="submit"
 					disabled={isLoggingIn}
-					className="w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
+					className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
 				>
-					{isLoggingIn ? <Spinner size="sm" className="text-white" /> : t("sign_in")}
+					<span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span>
+					{isLoggingIn && (
+						<span className="absolute inset-0 flex items-center justify-center">
+							<Spinner size="sm" className="text-white" />
+						</span>
+					)}
 				</button>
 			</form>
 
diff --git a/surfsense_web/app/(home)/register/page.tsx b/surfsense_web/app/(home)/register/page.tsx
index 60c3ba1be..e73df6169 100644
--- a/surfsense_web/app/(home)/register/page.tsx
+++ b/surfsense_web/app/(home)/register/page.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { toast, type ExternalToast } from "sonner";
 import { registerMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
 import { Logo } from "@/components/Logo";
 import { Spinner } from "@/components/ui/spinner";
@@ -131,7 +131,7 @@ export default function RegisterPage() {
 			setError({ title: errorDetails.title, message: errorDetails.description });
 
 			// Show error toast with conditional retry action
-			const toastOptions: any = {
+			const toastOptions: ExternalToast = {
 				description: errorDetails.description,
 				duration: 6000,
 			};
@@ -289,15 +289,13 @@ export default function RegisterPage() {
 						<button
 							type="submit"
 							disabled={isRegistering}
-							className="w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
+							className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
 						>
-							{isRegistering ? (
-								<>
+							<span className={isRegistering ? "invisible" : ""}>{t("register")}</span>
+							{isRegistering && (
+								<span className="absolute inset-0 flex items-center justify-center gap-2">
 									<Spinner size="sm" className="text-white" />
-									<span>{t("creating_account_btn")}</span>
-								</>
-							) : (
-								t("register")
+								</span>
 							)}
 						</button>
 					</form>