Extract list card avatar

src/modules/core/components/SpinnerImage.tsx

@@ -21,7 +21,7 @@ import { Priority } from '@/lib/Queue.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { useIntersectionObserver } from '@/modules/core/hooks/useIntersectionObserver.tsx';
 
-interface IProps {
+export interface SpinnerImageProps {
     shouldLoad?: boolean;
 
     src: string;
@@ -44,7 +44,7 @@ interface IProps {
 }
 
 export const SpinnerImage = forwardRef(
-    (props: IProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
+    (props: SpinnerImageProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
         const {
             shouldLoad = true,
             shouldDecode,

src/modules/core/components/cards/list/ListCardAvatar.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 Avatar, { AvatarProps } from '@mui/material/Avatar';
+import { SpinnerImage, SpinnerImageProps } from '@/modules/core/components/SpinnerImage.tsx';
+
+export const ListCardAvatar = ({
+    iconUrl,
+    alt,
+    slots,
+}: {
+    iconUrl: string;
+    alt: string;
+    slots?: { avatarProps?: Partial<AvatarProps>; spinnerImageProps?: Partial<SpinnerImageProps> };
+}) => (
+    <Avatar
+        variant="rounded"
+        alt={alt}
+        {...slots?.avatarProps}
+        sx={{
+            width: 56,
+            height: 56,
+            flex: '0 0 auto',
+            background: 'transparent',
+            ...slots?.avatarProps?.sx,
+        }}
+    >
+        <SpinnerImage
+            alt={alt}
+            src={iconUrl}
+            {...slots?.spinnerImageProps}
+            spinnerStyle={{ small: true, ...slots?.spinnerImageProps?.spinnerStyle }}
+            imgStyle={{ objectFit: 'cover', width: '100%', height: '100%', ...slots?.spinnerImageProps?.imgStyle }}
+        />
+    </Avatar>
+);