From a16c804692c1b84f2ada33967b11b835c356f519 Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Sat, 29 Aug 2026 13:13:42 -0400 Subject: [PATCH] feat(ui): show per-service login status while accounts are being checked When the app starts it verifies all three services sequentially, which could leave the other two login controls looking idle or trigger login actions before their real state is known. Track which service is currently being checked and reflect it in the header: - Add a serviceLoggingIn store (plus setServiceLoggingIn and isServiceLoggingIn helpers) to GlobalVariablesAndHelperFunctions. - Have the loginTo* functions and the startup CheckIf* functions toggle their service in the store (seed all three at startup, clear each as it resolves). - In Header, the login buttons show a spinner with 'Checking AniList' / 'Checking MAL' / 'Checking Simkl' and are disabled while that service is being checked, reverting to the normal 'AniList Login' style label once its state is known. - In the avatar menu, the 'Login to X' row shows a spinner with the matching 'Checking X' text while that service is logging in. --- frontend/src/App.svelte | 3 + .../src/helperComponents/AvatarMenu.svelte | 85 +++++++++++++------ frontend/src/helperComponents/Header.svelte | 48 +++++++++-- ...ckIfAniListLoggedInAndLoadWatchList.svelte | 4 + .../CheckIfMyAnimeListLoggedIn.svelte | 11 ++- .../helperModules/CheckIsSimklLoggedIn.svelte | 5 +- .../GlobalVariablesAndHelperFunctions.svelte | 80 +++++++++++------ 7 files changed, 173 insertions(+), 63 deletions(-) diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 264b96b..082c2e2 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -9,6 +9,7 @@ simklPrimary, malWatchList, simklWatchList, + serviceLoggingIn, } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte"; import { onMount } from "svelte"; import Router from "svelte-spa-router"; @@ -35,6 +36,8 @@ malLoggedIn.subscribe((value) => (isMALLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); + serviceLoggingIn.set(["anilist", "mal", "simkl"]); + !isAniListLoggedIn && (await CheckIfAniListLoggedInAndLoadWatchList()); !isMALLoggedIn && (await CheckIfMALLoggedInAndSetUser()); !isSimklLoggedIn && (await CheckIfSimklLoggedInAndSetUser()); diff --git a/frontend/src/helperComponents/AvatarMenu.svelte b/frontend/src/helperComponents/AvatarMenu.svelte index a79ef69..ff04de7 100644 --- a/frontend/src/helperComponents/AvatarMenu.svelte +++ b/frontend/src/helperComponents/AvatarMenu.svelte @@ -14,6 +14,7 @@ logoutOfAniList, logoutOfMAL, logoutOfSimkl, + serviceLoggingIn, } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; import * as runtime from "../../wailsjs/runtime"; import type { MyAnimeListUser } from "../mal/types/MALTypes"; @@ -26,6 +27,7 @@ let isAniListLoggedIn: boolean; let isSimklLoggedIn: boolean; let isMALLoggedIn: boolean; + let loggingIn: string[] = []; aniListUser.subscribe((value) => (currentAniListUser = value)); malUser.subscribe((value) => (currentMALUser = value)); @@ -33,6 +35,7 @@ aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); malLoggedIn.subscribe((value) => (isMALLoggedIn = value)); + serviceLoggingIn.subscribe((value) => (loggingIn = value)); function dropdownUser(): void { let dropdown = document.querySelector("#userDropdown"); @@ -98,15 +101,24 @@ {:else}
  • - + {#if loggingIn.includes("anilist")} + + + AChecking AniList + + {:else} + + {/if}
    • {/if} {#if isMALLoggedIn} @@ -120,15 +132,24 @@ {:else}
  • - + {#if loggingIn.includes("mal")} + + + MChecking MyAnimeList + + {:else} + + {/if}
    • {/if} {#if isSimklLoggedIn} @@ -143,15 +164,24 @@ {:else}
  • - + {#if loggingIn.includes("simkl")} + + + SChecking Simkl + + {:else} + + {/if}
    • {/if} @@ -174,4 +204,3 @@ - diff --git a/frontend/src/helperComponents/Header.svelte b/frontend/src/helperComponents/Header.svelte index b592905..21dac39 100644 --- a/frontend/src/helperComponents/Header.svelte +++ b/frontend/src/helperComponents/Header.svelte @@ -7,6 +7,7 @@ loginToSimkl, malLoggedIn, simklLoggedIn, + serviceLoggingIn, } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; import AvatarMenu from "./AvatarMenu.svelte"; import logo from "../assets/images/AniTrackLogo.svg"; @@ -15,10 +16,12 @@ let isAniListLoggedIn: boolean; let isSimklLoggedIn: boolean; let isMALLoggedIn: boolean; + let loggingIn: string[] = []; aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); malLoggedIn.subscribe((value) => (isMALLoggedIn = value)); + serviceLoggingIn.subscribe((value) => (loggingIn = value));