login spinner

Author: hry-gh

src/App.tsx

@@ -100,6 +100,7 @@ const AppContent = () => {
   } = useWine();
 
   const byondLoginVisible = useByondStore((s) => s.loginVisible);
+  const byondLoggingIn = useByondStore((s) => s.loggingIn);
 
   const [settingsVisible, setSettingsVisible] = useState(false);
   const [relayDropdownOpen, setRelayDropdownOpen] = useState(false);
@@ -198,6 +199,7 @@ const AppContent = () => {
       )}
       <ByondLoginModal
         visible={byondLoginVisible}
+        loggingIn={byondLoggingIn}
         onClose={() => commands.cancelByondLogin()}
       />
       {config?.features.direct_connect && (

src/components/ByondLoginModal.tsx

@@ -1,18 +1,26 @@
 import { useTranslation } from "react-i18next";
-import { Modal, ModalCloseButton } from "./Modal";
+import { Modal, ModalCloseButton, ModalSpinner } from "./Modal";
 
 interface ByondLoginModalProps {
   visible: boolean;
+  loggingIn: boolean;
   onClose: () => void;
 }
 
-export const ByondLoginModal = ({ visible, onClose }: ByondLoginModalProps) => {
+export const ByondLoginModal = ({ visible, loggingIn, onClose }: ByondLoginModalProps) => {
   const { t } = useTranslation();
+  const showSpinner = !visible && loggingIn;
 
   return (
-    <Modal visible={visible} onClose={onClose} className="auth-modal byond-login-modal" closeOnOverlayClick>
+    <Modal visible={visible || showSpinner} onClose={onClose} className="auth-modal byond-login-modal" closeOnOverlayClick={showSpinner}>
       <ModalCloseButton onClick={onClose} />
       <h2>{t("settings.loginToByond")}</h2>
+      {showSpinner && (
+        <div className="byond-login-spinner">
+          <p>{t("settings.byondWaiting")}</p>
+          <ModalSpinner />
+        </div>
+      )}
     </Modal>
   );
 };

src/hooks/useAuthHandlers.ts

@@ -46,15 +46,21 @@ export function useAuthHandlers() {
     }
   }, [logout, showError]);
 
+  const setLoggingIn = useByondStore((s) => s.setLoggingIn);
   const handleByondLogin = useCallback(async () => {
-    const result = await commands.startByondLogin();
-    if (result.status === "error") {
-      if (result.error.type === "cancelled") return;
-      try { unwrap(result); } catch (err) {
-        showError(err instanceof Error ? err.message : String(err));
+    setLoggingIn(true);
+    try {
+      const result = await commands.startByondLogin();
+      if (result.status === "error") {
+        if (result.error.type === "cancelled") return;
+        try { unwrap(result); } catch (err) {
+          showError(err instanceof Error ? err.message : String(err));
+        }
       }
+    } finally {
+      setLoggingIn(false);
     }
-  }, [showError]);
+  }, [showError, setLoggingIn]);
 
   const setLoggingOut = useByondStore((s) => s.setLoggingOut);
   const handleByondLogout = useCallback(async () => {

src/i18n/locales/en.json

@@ -99,7 +99,7 @@
     "reportIssue": "Report an issue",
     "loginToByond": "BYOND Login",
     "byondPagerWarning": "BYOND pager is not running. You can either open BYOND and log in, or use web login below.",
-    "byondWaiting": "Waiting for BYOND login... (check the login window)",
+    "byondWaiting": "Logging in to BYOND...",
     "byondSuccess": "Logged in to BYOND successfully!",
     "byondLoginFailed": "Login failed: {{error}}",
     "language": "Language",

src/stores/byondStore.ts

@@ -7,9 +7,11 @@ interface ByondStore {
   username: string | null;
   pagerRunning: boolean | null;
   loginVisible: boolean;
+  loggingIn: boolean;
   loggingOut: boolean;
   setUsername: (username: string | null) => void;
   setPagerRunning: (running: boolean | null) => void;
+  setLoggingIn: (loggingIn: boolean) => void;
   setLoggingOut: (loggingOut: boolean) => void;
   checkStatus: () => Promise<void>;
   checkSession: () => Promise<void>;
@@ -20,10 +22,12 @@ export const useByondStore = create<ByondStore>()((set) => ({
   username: null,
   pagerRunning: null,
   loginVisible: false,
+  loggingIn: false,
   loggingOut: false,
 
   setUsername: (username) => set({ username }),
   setPagerRunning: (pagerRunning) => set({ pagerRunning }),
+  setLoggingIn: (loggingIn) => set({ loggingIn }),
   setLoggingOut: (loggingOut) => set({ loggingOut }),
 
   checkStatus: async () => {

src/styles/base.scss

@@ -1147,6 +1147,14 @@ body {
     align-items: center;
     justify-content: flex-start;
     padding-top: 16px;
+
+    .byond-login-spinner {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   h2 {