Add "ui login" support

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')}