From b1165c37803c3a06dfd235320dfa571e12c143f6 Mon Sep 17 00:00:00 2001
From: sam <sam@vulpine.solutions>
Date: Tue, 1 Oct 2024 14:44:34 +0200
Subject: [PATCH] refactor(frontend): extract avatar image component

---
 .../app/components/profile/AvatarImage.tsx    | 22 +++++++++++++++++++
 .../app/components/profile/BaseProfile.tsx    | 13 +++++------
 .../app/routes/$username/MemberCard.tsx       |  9 ++++----
 3 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 Foxnouns.Frontend/app/components/profile/AvatarImage.tsx

diff --git a/Foxnouns.Frontend/app/components/profile/AvatarImage.tsx b/Foxnouns.Frontend/app/components/profile/AvatarImage.tsx
new file mode 100644
index 0000000..e29ff75
--- /dev/null
+++ b/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"}
+		/>
+	);
+}
diff --git a/Foxnouns.Frontend/app/components/profile/BaseProfile.tsx b/Foxnouns.Frontend/app/components/profile/BaseProfile.tsx
index a058755..2d6171e 100644
--- a/Foxnouns.Frontend/app/components/profile/BaseProfile.tsx
+++ b/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}
-								className="rounded-circle img-fluid"
+								alt={t("user.avatar-alt", { username: name })}
 							/>
 						) : (
-							<img
+							<AvatarImage
 								src={profile.avatar_url || defaultAvatarUrl}
-								alt={t("member.avatar-alt", { name: name })}
 								width={200}
-								height={200}
-								className="rounded-circle img-fluid"
+								alt={t("member.avatar-alt", { name: name })}
 							/>
 						)}
 						{profile.flags && profile.bio && (
diff --git a/Foxnouns.Frontend/app/routes/$username/MemberCard.tsx b/Foxnouns.Frontend/app/routes/$username/MemberCard.tsx
index bc6e516..b112a08 100644
--- a/Foxnouns.Frontend/app/routes/$username/MemberCard.tsx
+++ b/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}
-					loading="lazy"
-					className="rounded-circle img-fluid"
+					alt={t("user.member-avatar-alt", { name: member.name })}
+					lazyLoad
 				/>
 			</Link>
 			<p className="m-2">