refactor(frontend): extract avatar image component

Foxnouns.Frontend/app/components/profile/AvatarImage.tsx

@@ -0,0 +1,22 @@
+export default function AvatarImage({
+	src,
+	width,
+	alt,
+	lazyLoad,
+}: {
+	src: string;
+	width: number;
+	alt: string;
+	lazyLoad?: boolean;
+}) {
+	return (
+		<img
+			src={src}
+			alt={alt}
+			width={width}
+			height={width}
+			className="rounded-circle img-fluid"
+			loading={lazyLoad ? "lazy" : "eager"}
+		/>
+	);
+}

Foxnouns.Frontend/app/components/profile/BaseProfile.tsx

@@ -6,6 +6,7 @@ import ProfileLink from "~/components/profile/ProfileLink";
 import ProfileField from "~/components/profile/ProfileField";
 import { useTranslation } from "react-i18next";
 import { renderMarkdown } from "~/lib/markdown";
+import AvatarImage from "~/components/profile/AvatarImage";
 
 export type Props = {
 	name: string;
@@ -31,20 +32,16 @@ export default function BaseProfile({
 				<div className="row">
 					<div className="col-md-4 text-center">
 						{userI18nKeys ? (
-							<img
+							<AvatarImage
 								src={profile.avatar_url || defaultAvatarUrl}
-								alt={t("user.avatar-alt", { username: name })}
 								width={200}
-								height={200}
+								alt={t("user.avatar-alt", { username: name })}
-								className="rounded-circle img-fluid"
 							/>
 						) : (
-							<img
+							<AvatarImage
 								src={profile.avatar_url || defaultAvatarUrl}
-								alt={t("member.avatar-alt", { name: name })}
 								width={200}
-								height={200}
+								alt={t("member.avatar-alt", { name: name })}
-								className="rounded-circle img-fluid"
 							/>
 						)}
 						{profile.flags && profile.bio && (

Foxnouns.Frontend/app/routes/$username/MemberCard.tsx

@@ -10,6 +10,7 @@ import { defaultAvatarUrl } from "~/lib/utils";
 import { useTranslation } from "react-i18next";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import { Lock } from "react-bootstrap-icons";
+import AvatarImage from "~/components/profile/AvatarImage";
 
 export default function MemberCard({ user, member }: { user: PartialUser; member: PartialMember }) {
 	const { t } = useTranslation();
@@ -37,13 +38,11 @@ export default function MemberCard({ user, member }: { user: PartialUser; member
 	return (
 		<div className="col">
 			<Link to={`/@${user.username}/${member.name}`}>
-				<img
+				<AvatarImage
 					src={member.avatar_url || defaultAvatarUrl}
-					alt={t("user.member-avatar-alt", { name: member.name })}
 					width={200}
-					height={200}
+					alt={t("user.member-avatar-alt", { name: member.name })}
-					loading="lazy"
+					lazyLoad
-					className="rounded-circle img-fluid"
 				/>
 			</Link>
 			<p className="m-2">