Extract list card avatar

src/modules/migration/components/MigrationCard.tsx

@@ -11,15 +11,14 @@ import CardContent from '@mui/material/CardContent';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import Chip from '@mui/material/Chip';
-import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
 
 export type TMigratableSource = NonNullable<GetMigratableSourcesQuery['mangas']['nodes'][number]['source']> & {
     mangaCount: number;
@@ -43,24 +42,8 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
                         p: 1.5,
                     }}
                 >
-                    <Box sx={{ display: 'flex' }}>
-                        <Avatar
-                            variant="rounded"
-                            sx={{
-                                width: 56,
-                                height: 56,
-                                flex: '0 0 auto',
-                                mr: 1,
-                                background: 'transparent',
-                            }}
-                        >
-                            <SpinnerImage
-                                spinnerStyle={{ small: true }}
-                                imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
-                                alt={sourceName}
-                                src={requestManager.getValidImgUrlFor(iconUrl)}
-                            />
-                        </Avatar>
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                        <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
                         <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                             <Typography variant="h6" component="h3">
                                 {sourceName}