Add "ui login" support

src/features/authentication/AuthManager.ts

@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { AppStorage } from '@/lib/storage/AppStorage.ts';
+import { useSessionStorage } from '@/base/hooks/useStorage.tsx';
+
+export class AuthManager {
+    static readonly AUTH_REQUIRED_KEY = 'auth-required';
+
+    static readonly REFRESH_TOKEN_KEY = 'auth-refresh-token';
+
+    static readonly REACT_SESSION_REFRESH_KEY = 'auth-react-session-refresh';
+
+    private static accessToken: string | null = null;
+
+    static isAuthRequired(): boolean | null {
+        return AppStorage.session.getItemParsed(AuthManager.AUTH_REQUIRED_KEY, null);
+    }
+
+    static setAuthRequired(value: boolean | null): void {
+        AppStorage.session.setItem(AuthManager.AUTH_REQUIRED_KEY, value);
+    }
+
+    static useIsAuthRequired(): boolean | null {
+        const [value] = useSessionStorage(AuthManager.AUTH_REQUIRED_KEY, null);
+
+        return value;
+    }
+
+    static getAccessToken(): string | null {
+        return AuthManager.accessToken;
+    }
+
+    static getRefreshToken(): string | null {
+        return AppStorage.session.getItemParsed(AuthManager.REFRESH_TOKEN_KEY, null);
+    }
+
+    static getTokens(): { accessToken: string | null; refreshToken: string | null } {
+        return {
+            accessToken: AuthManager.getAccessToken(),
+            refreshToken: AuthManager.getRefreshToken(),
+        };
+    }
+
+    static setAccessToken(token: string): void {
+        AuthManager.accessToken = token;
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static setRefreshToken(token: string): void {
+        AppStorage.session.setItem(AuthManager.REFRESH_TOKEN_KEY, token);
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static setTokens(accessToken: string, refreshToken: string): void {
+        AuthManager.setAccessToken(accessToken);
+        AuthManager.setRefreshToken(refreshToken);
+    }
+
+    static removeAccessToken(): void {
+        AuthManager.accessToken = null;
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static removeRefreshToken(): void {
+        AppStorage.session.setItem(AuthManager.REFRESH_TOKEN_KEY, undefined);
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static removeTokens(): void {
+        AuthManager.removeAccessToken();
+        AuthManager.removeRefreshToken();
+    }
+
+    private static getNextReactSessionContextId(): number {
+        const id = AppStorage.session.getItemParsed(AuthManager.REACT_SESSION_REFRESH_KEY, 0);
+
+        return (id + 1) % Number.MAX_SAFE_INTEGER;
+    }
+
+    static refreshReactSessionContext(): void {
+        AppStorage.session.setItem(AuthManager.REACT_SESSION_REFRESH_KEY, AuthManager.getNextReactSessionContextId());
+    }
+
+    static useListenToReactSessionContextRefreshEvent(): void {
+        useSessionStorage(AuthManager.REACT_SESSION_REFRESH_KEY, 0);
+    }
+}

src/features/authentication/SessionContext.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { AuthManager } from '@/features/authentication/AuthManager.ts';
+
+interface TSessionContext {
+    isAuthRequired: boolean | null;
+    accessToken: string | null;
+    refreshToken: string | null;
+}
+
+const SessionContext = createContext<TSessionContext>({
+    isAuthRequired: null,
+    accessToken: null,
+    refreshToken: null,
+});
+
+export const SessionContextProvider = ({ children }: { children: ReactNode }) => {
+    AuthManager.useListenToReactSessionContextRefreshEvent();
+
+    const isAuthRequired = AuthManager.useIsAuthRequired();
+    const { accessToken, refreshToken } = AuthManager.getTokens();
+
+    const value = useMemo(
+        () => ({
+            isAuthRequired,
+            accessToken,
+            refreshToken,
+        }),
+        [isAuthRequired, accessToken, refreshToken],
+    );
+
+    return <SessionContext.Provider value={value}>{children}</SessionContext.Provider>;
+};
+
+export const useSessionContext = () => useContext(SessionContext);

src/features/authentication/components/AuthGuard.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { ReactNode, useEffect } from 'react';
+import { useSessionContext } from '@/features/authentication/SessionContext.tsx';
+import { SplashScreen } from '@/features/authentication/components/SplashScreen.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { AuthManager } from '@/features/authentication/AuthManager.ts';
+
+export const AuthGuard = ({ children }: { children: ReactNode }) => {
+    const { isAuthRequired } = useSessionContext();
+
+    requestManager.useGetAbout({
+        skip: isAuthRequired !== null,
+        onCompleted: () => AuthManager.setAuthRequired(false),
+    });
+
+    useEffect(() => {
+        const onUnload = () => AuthManager.setAuthRequired(null);
+
+        window.addEventListener('beforeunload', onUnload);
+
+        return () => window.removeEventListener('beforeunload', onUnload);
+    }, []);
+
+    if (isAuthRequired === null) {
+        return <SplashScreen />;
+    }
+
+    return children;
+};

src/features/authentication/components/SplashScreen.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTheme } from '@mui/material/styles';
+import Stack from '@mui/material/Stack';
+import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
+import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
+
+export const SplashScreen = () => {
+    const theme = useTheme();
+
+    return (
+        <Stack
+            sx={{
+                minWidth: '100vw',
+                minHeight: '100vh',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'primary.light',
+                ...theme.applyStyles('dark', {
+                    backgroundColor: 'primary.dark',
+                }),
+            }}
+        >
+            <SuwayomiLogo
+                sx={{
+                    fontSize: 250,
+                    [theme.breakpoints.up('lg')]: {
+                        fontSize: 350,
+                    },
+                }}
+                circleRingColor={theme.palette.primary.light}
+            />
+            {import.meta.env.DEV && (
+                <Stack sx={{ height: 'auto', mt: 5 }}>
+                    <ServerAddressSetting />
+                </Stack>
+            )}
+        </Stack>
+    );
+};

src/features/authentication/screens/LoginPage.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import { StringParam, useQueryParam } from 'use-query-params';
+import { PasswordTextField } from '@/base/components/inputs/PasswordTextField.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { makeToast } from '@/base/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { AuthManager } from '@/features/authentication/AuthManager.ts';
+import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
+import { useSessionContext } from '@/features/authentication/SessionContext.tsx';
+import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
+import { SearchParam } from '@/base/Base.types.ts';
+import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
+
+export const LoginPage = () => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { setOverride } = useNavBarContext();
+    const navigate = useNavigate();
+    const { isAuthRequired, accessToken, refreshToken } = useSessionContext();
+
+    const [redirect] = useQueryParam(SearchParam.REDIRECT, StringParam);
+    const [loginUser, { loading: isLoading }] = requestManager.useLoginUser();
+
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+
+    const isAuthenticated = !isAuthRequired || (!!isAuthRequired && !!accessToken && !!refreshToken);
+
+    const doLogin = async () => {
+        try {
+            const { data } = await loginUser({ variables: { username, password } });
+
+            if (data) {
+                AuthManager.setTokens(data.login.accessToken, data.login.refreshToken);
+                navigate(redirect ?? AppRoutes.root.path);
+            }
+        } catch (e) {
+            makeToast(t('tracking.action.login.label.failure', { name: 'Suwayomi' }), 'error', getErrorMessage(e));
+        }
+    };
+
+    useEffect(() => {
+        setOverride({ status: true, value: null });
+
+        return () => setOverride({ status: false, value: null });
+    }, []);
+
+    if (isAuthenticated) {
+        return <Navigate to={AppRoutes.root.path} replace />;
+    }
+
+    return (
+        <Stack
+            sx={{
+                [theme.breakpoints.up('lg')]: {
+                    flexDirection: 'row',
+                },
+            }}
+        >
+            <Stack
+                sx={{
+                    minHeight: '50vh',
+                    flexBasis: '60%',
+                    p: 4,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: 'primary.light',
+                    ...theme.applyStyles('dark', {
+                        backgroundColor: 'primary.dark',
+                    }),
+                    [theme.breakpoints.up('lg')]: {
+                        minHeight: '0vh',
+                        height: '100vh',
+                    },
+                }}
+            >
+                <SuwayomiLogo
+                    sx={{
+                        fontSize: 250,
+                        [theme.breakpoints.up('lg')]: {
+                            fontSize: 350,
+                        },
+                    }}
+                    circleRingColor={theme.palette.primary.light}
+                />
+            </Stack>
+            <Stack
+                sx={{
+                    minHeight: '50vh',
+                    flexBasis: '40%',
+                    p: 4,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    [theme.breakpoints.up('lg')]: {
+                        minHeight: '0vh',
+                        height: '100vh',
+                    },
+                }}
+            >
+                <Stack sx={{ maxWidth: 300, gap: 2 }}>
+                    <Stack>
+                        <TextField
+                            autoFocus
+                            margin="dense"
+                            id="username"
+                            name="username"
+                            label={t('global.label.username')}
+                            type="text"
+                            fullWidth
+                            variant="standard"
+                            onChange={(e) => setUsername(e.target.value)}
+                        />
+                        <PasswordTextField
+                            margin="dense"
+                            fullWidth
+                            variant="standard"
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                        {import.meta.env.DEV && <ServerAddressSetting />}
+                    </Stack>
+                    <Button disabled={isLoading || (!username && !password)} variant="contained" onClick={doLogin}>
+                        {t('global.button.log_in')}
+                    </Button>
+                </Stack>
+            </Stack>
+        </Stack>
+    );
+};

src/features/settings/Settings.constants.ts

@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+import dayjs from 'dayjs';
 import { DEFAULT_DEVICE } from '@/features/device/services/Device.ts';
 import { DEFAULT_SORT_SETTINGS } from '@/features/migration/Migration.constants.ts';
 import { GlobalUpdateSkipEntriesSettings, MetadataServerSettings } from '@/features/settings/Settings.types.ts';
@@ -90,9 +91,13 @@ const AUTH_MODES_TO_TRANSLATION_KEY: { [mode in AuthMode]: SelectSettingValueDis
         description: 'settings.server.auth.mode.option.basicAuth.label.description',
     },
     [AuthMode.SimpleLogin]: {
-        text: 'settings.server.auth.mode.option.simpleLogin.label.title',
-        description: 'settings.server.auth.mode.option.simpleLogin.label.description',
-        disclaimer: 'settings.server.auth.mode.option.simpleLogin.label.info',
+        text: 'settings.server.auth.mode.option.simple_login.label.title',
+        description: 'settings.server.auth.mode.option.simple_login.label.description',
+        disclaimer: 'settings.server.auth.mode.option.simple_login.label.info',
+    },
+    [AuthMode.UiLogin]: {
+        text: 'settings.server.auth.mode.option.ui_login.label.title',
+        description: 'settings.server.auth.mode.option.ui_login.label.description',
     },
 };
 export const AUTH_MODES_SELECT_VALUES: SelectSettingValue<AuthMode>[] = AUTH_MODES.map((mode) => [
@@ -183,3 +188,15 @@ export const WEB_UI_UPDATE_INTERVAL = {
     min: 1,
     max: 23,
 };
+
+export const JWT_ACCESS_TOKEN_EXPIRY = {
+    default: dayjs.duration(5, 'minute').asMinutes(),
+    min: dayjs.duration(1, 'minute').asMinutes(),
+    max: dayjs.duration(4, 'hour').asMinutes(),
+};
+
+export const JWT_REFRESH_TOKEN_EXPIRY = {
+    default: dayjs.duration(60, 'day').asDays(),
+    min: dayjs.duration(1, 'day').asDays(),
+    max: dayjs.duration(1, 'year').asDays(),
+};

src/features/settings/Settings.types.ts

@@ -55,6 +55,9 @@ export type ServerSettingsType = Pick<
     | 'authMode'
     | 'authUsername'
     | 'authPassword'
+    | 'jwtAudience'
+    | 'jwtTokenExpiry'
+    | 'jwtRefreshExpiry'
     | 'flareSolverrEnabled'
     | 'flareSolverrTimeout'
     | 'flareSolverrUrl'

src/features/settings/components/ServerAddressSetting.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { TextSetting } from '@/base/components/settings/text/TextSetting.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { useLocalStorage } from '@/base/hooks/useStorage.tsx';
+
+export const ServerAddressSetting = () => {
+    const { t } = useTranslation();
+
+    const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', window.location.origin);
+
+    const handleServerAddressChange = (address: string) => {
+        const serverBaseUrl = address.replaceAll(/(\/)+$/g, '');
+        setServerAddress(serverBaseUrl);
+        requestManager.reset();
+    };
+
+    return (
+        <TextSetting
+            settingName={t('settings.about.server.label.address')}
+            handleChange={handleServerAddressChange}
+            value={serverAddress}
+            placeholder="http://localhost:4567"
+        />
+    );
+};

src/features/settings/screens/ServerSettings.tsx

@@ -15,8 +15,8 @@ import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import ListSubheader from '@mui/material/ListSubheader';
 import { t as translate } from 'i18next';
+import dayjs from 'dayjs';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { useLocalStorage } from '@/base/hooks/useStorage.tsx';
 import { TextSetting } from '@/base/components/settings/text/TextSetting.tsx';
 import { NumberSetting } from '@/base/components/settings/NumberSetting.tsx';
 import { SelectSetting } from '@/base/components/settings/SelectSetting.tsx';
@@ -33,7 +33,13 @@ import { ServerSettings as GqlServerSettings, ServerSettingsType } from '@/featu
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 import { AuthMode, SortOrder } from '@/lib/graphql/generated/graphql';
-import { AUTH_MODES_SELECT_VALUES } from '@/features/settings/Settings.constants.ts';
+import {
+    AUTH_MODES_SELECT_VALUES,
+    JWT_ACCESS_TOKEN_EXPIRY,
+    JWT_REFRESH_TOKEN_EXPIRY,
+} from '@/features/settings/Settings.constants.ts';
+import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
+import { AuthManager } from '@/features/authentication/AuthManager.ts';
 
 const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType => ({
     ip: settings.ip,
@@ -52,6 +58,9 @@ const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType
     authMode: settings.authMode,
     authUsername: settings.authUsername,
     authPassword: settings.authPassword,
+    jwtAudience: settings.jwtAudience,
+    jwtTokenExpiry: settings.jwtTokenExpiry,
+    jwtRefreshExpiry: settings.jwtRefreshExpiry,
     flareSolverrEnabled: settings.flareSolverrEnabled,
     flareSolverrTimeout: settings.flareSolverrTimeout,
     flareSolverrUrl: settings.flareSolverrUrl,
@@ -99,24 +108,18 @@ export const ServerSettings = () => {
     });
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
-    const [serverAddress, setServerAddress] = useLocalStorage<string>(
-        'serverBaseURL',
-        import.meta.env.VITE_SERVER_URL_DEFAULT,
-    );
-
-    const handleServerAddressChange = (address: string) => {
-        const serverBaseUrl = address.replaceAll(/(\/)+$/g, '');
-        setServerAddress(serverBaseUrl);
-        requestManager.reset();
-    };
-
-    const updateSetting = <Setting extends keyof ServerSettingsType>(
+    const updateSetting = async <Setting extends keyof ServerSettingsType>(
         setting: Setting,
         value: ServerSettingsType[Setting],
+        onCompletion?: (success: boolean) => void,
     ) => {
-        mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch((e) =>
-            makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
-        );
+        try {
+            await mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
+            onCompletion?.(true);
+        } catch (e) {
+            makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e));
+            onCompletion?.(false);
+        }
     };
 
     const localSettings = useMemo(
@@ -128,12 +131,7 @@ export const ServerSettings = () => {
                     </ListSubheader>
                 }
             >
-                <TextSetting
-                    settingName={t('settings.about.server.label.address')}
-                    handleChange={handleServerAddressChange}
-                    value={serverAddress}
-                    placeholder="http://localhost:4567"
-                />
+                <ServerAddressSetting />
                 <ListItem>
                     <ListItemText
                         primary={t('global.update.settings.inform.label.title')}
@@ -147,7 +145,7 @@ export const ServerSettings = () => {
                 </ListItem>
             </List>
         ),
-        [serverAddress, serverInformAvailableUpdate],
+        [serverInformAvailableUpdate],
     );
 
     const loading = areMetadataServerSettingsLoading || areServerSettingsLoading;
@@ -187,8 +185,8 @@ export const ServerSettings = () => {
     }
 
     const serverSettings = extractServerSettings(data!.settings);
-    const authModeDisabled = !serverSettings.authUsername.trim() || !serverSettings.authPassword.trim();
-
+    const authModeDisabled = !serverSettings.authUsername?.trim() || !serverSettings.authPassword?.trim();
+    console.log('asdf', serverSettings.jwtTokenExpiry, serverSettings.jwtRefreshExpiry);
     return (
         <List sx={{ pt: 0 }}>
             {localSettings}
@@ -271,7 +269,19 @@ export const ServerSettings = () => {
                     settingName={t('settings.server.auth.label.title')}
                     value={serverSettings.authMode}
                     values={AUTH_MODES_SELECT_VALUES}
-                    handleChange={(mode) => updateSetting('authMode', mode)}
+                    handleChange={(mode) => {
+                        updateSetting('authMode', mode, (success) => {
+                            if (!success) {
+                                return;
+                            }
+
+                            if (mode !== AuthMode.UiLogin) {
+                                AuthManager.removeTokens();
+                            }
+
+                            AuthManager.setAuthRequired(mode === AuthMode.UiLogin);
+                        });
+                    }}
                     disabled={authModeDisabled}
                 />
                 <TextSetting
@@ -287,6 +297,41 @@ export const ServerSettings = () => {
                     validate={(value) => serverSettings.authMode === AuthMode.None || !!value.trim()}
                     handleChange={(authPassword) => updateSetting('authPassword', authPassword)}
                 />
+                {serverSettings.authMode === AuthMode.UiLogin && (
+                    <>
+                        <TextSetting
+                            settingName={t('settings.server.auth.jwt.audience')}
+                            value={serverSettings.jwtAudience}
+                            handleChange={(audience) => updateSetting('jwtAudience', audience)}
+                        />
+                        <NumberSetting
+                            settingTitle={t('settings.server.auth.jwt.access_token_expiry')}
+                            settingValue={dayjs.duration(serverSettings.jwtTokenExpiry).humanize()}
+                            value={dayjs.duration(serverSettings.jwtTokenExpiry).asMinutes()}
+                            valueUnit={t('global.time.minutes.minute_other')}
+                            defaultValue={JWT_ACCESS_TOKEN_EXPIRY.default}
+                            minValue={JWT_ACCESS_TOKEN_EXPIRY.min}
+                            maxValue={JWT_ACCESS_TOKEN_EXPIRY.max}
+                            handleUpdate={(expiry) =>
+                                updateSetting('jwtTokenExpiry', dayjs.duration(expiry, 'minute').toISOString())
+                            }
+                            showSlider
+                        />
+                        <NumberSetting
+                            settingTitle={t('settings.server.auth.jwt.refresh_token_expiry')}
+                            settingValue={dayjs.duration(serverSettings.jwtRefreshExpiry).humanize()}
+                            value={dayjs.duration(serverSettings.jwtRefreshExpiry).asDays()}
+                            valueUnit={t('global.time.days.day_other')}
+                            defaultValue={JWT_REFRESH_TOKEN_EXPIRY.default}
+                            minValue={JWT_REFRESH_TOKEN_EXPIRY.min}
+                            maxValue={JWT_REFRESH_TOKEN_EXPIRY.max}
+                            handleUpdate={(expiry) =>
+                                updateSetting('jwtRefreshExpiry', dayjs.duration(expiry, 'day').toISOString())
+                            }
+                            showSlider
+                        />
+                    </>
+                )}
             </List>
             <List
                 subheader={

src/features/tracker/components/cards/SettingsTrackerCard.tsx

@@ -13,7 +13,6 @@ import ListItemButton from '@mui/material/ListItemButton';
 import Chip from '@mui/material/Chip';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
-import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -28,6 +27,7 @@ import { Trackers } from '@/features/tracker/services/Trackers.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useLocalStorage } from '@/base/hooks/useStorage.tsx';
 import { TTrackerSearch } from '@/features/tracker/Tracker.types.ts';
+import { AvatarSpinner } from '@/base/components/AvatarSpinner.tsx';
 
 export const SettingsTrackerCard = ({ tracker }: { tracker: TTrackerSearch }) => {
     const { t } = useTranslation();
@@ -86,11 +86,15 @@ export const SettingsTrackerCard = ({ tracker }: { tracker: TTrackerSearch }) =>
                 <>
                     <ListItemButton {...bindTrigger(popupState)} onClick={() => onClick(popupState.open)}>
                         <ListItemAvatar sx={{ paddingRight: '20px' }}>
-                            <Avatar
+                            <AvatarSpinner
                                 alt={`${tracker.name}`}
-                                src={requestManager.getValidImgUrlFor(tracker.icon)}
-                                variant="rounded"
-                                sx={{ width: 64, height: 64 }}
+                                iconUrl={requestManager.getValidImgUrlFor(tracker.icon)}
+                                slots={{
+                                    avatarProps: {
+                                        variant: 'rounded',
+                                        sx: { width: 64, height: 64 },
+                                    },
+                                }}
                             />
                         </ListItemAvatar>
                         <ListItemText primary={tracker.name} />

src/features/tracker/components/cards/TrackerActiveCard.tsx

@@ -8,7 +8,6 @@
 
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import Avatar from '@mui/material/Avatar';
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -44,6 +43,7 @@ import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { TrackRecordType } from '@/lib/graphql/generated/graphql.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { TTrackerBind, TTrackRecordBind } from '@/features/tracker/Tracker.types.ts';
+import { AvatarSpinner } from '@/base/components/AvatarSpinner.tsx';
 
 const TrackerActiveLink = ({ children, url }: { children: React.ReactNode; url: string }) => (
     <Link href={url} rel="noreferrer" target="_blank" underline="none" color="inherit">
@@ -203,11 +203,15 @@ const TrackerActiveHeader = ({
                 }
             >
                 <TrackerActiveLink url={trackRecord.remoteUrl}>
-                    <Avatar
+                    <AvatarSpinner
                         alt={`${tracker.name}`}
-                        src={requestManager.getValidImgUrlFor(tracker.icon)}
-                        variant="rounded"
-                        sx={{ width: 64, height: 64 }}
+                        iconUrl={requestManager.getValidImgUrlFor(tracker.icon)}
+                        slots={{
+                            avatarProps: {
+                                variant: 'rounded',
+                                sx: { width: 64, height: 64 },
+                            },
+                        }}
                     />
                 </TrackerActiveLink>
             </Badge>

src/features/tracker/components/cards/TrackerUntrackedCard.tsx

@@ -8,7 +8,6 @@
 
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
 import Stack from '@mui/material/Stack';
@@ -16,6 +15,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { CARD_STYLING } from '@/features/tracker/Tracker.constants.ts';
 
 import { TTrackerBase } from '@/features/tracker/Tracker.types.ts';
+import { AvatarSpinner } from '@/base/components/AvatarSpinner.tsx';
 
 export const TrackerUntrackedCard = ({
     tracker,
@@ -35,11 +35,15 @@ export const TrackerUntrackedCard = ({
                         gap: 3,
                     }}
                 >
-                    <Avatar
+                    <AvatarSpinner
                         alt={`${tracker.name}`}
-                        src={requestManager.getValidImgUrlFor(tracker.icon)}
-                        variant="rounded"
-                        sx={{ width: 64, height: 64 }}
+                        iconUrl={requestManager.getValidImgUrlFor(tracker.icon)}
+                        slots={{
+                            avatarProps: {
+                                variant: 'rounded',
+                                sx: { width: 64, height: 64 },
+                            },
+                        }}
                     />
                     <Button sx={{ flexGrow: '1' }} onClick={onClick}>
                         {t('tracking.action.button.add_tracking')}