From 3b73ff4f693d9d21de2402641c26df7250750807 Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@aly.codes>
Date: Wed, 29 Jul 2026 17:07:48 -0400
Subject: [PATCH] Profile: lazy load avis

---
 src/components/profile/ProfileAvatar.tsx | 4 ++++
 src/components/profile/ProfileByline.tsx | 1 +
 src/components/profile/ProfileHeader.tsx | 7 ++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/profile/ProfileAvatar.tsx b/src/components/profile/ProfileAvatar.tsx
index c2e46d1..52c77b1 100644
--- a/src/components/profile/ProfileAvatar.tsx
+++ b/src/components/profile/ProfileAvatar.tsx
@@ -8,6 +8,7 @@ type ProfileAvatarProps = {
   profile: Profile
   bskyProfile?: AppBskyActorProfile.Main | null
   avatarUrl?: string | null
+  loading?: 'eager' | 'lazy'
   size?: 'small' | 'medium'
 }
 
@@ -16,6 +17,7 @@ export function ProfileAvatar({
   profile,
   bskyProfile,
   avatarUrl,
+  loading = 'lazy',
   size = 'medium',
 }: ProfileAvatarProps) {
   const avatar = profile.value.avatar ?? bskyProfile?.avatar
@@ -28,6 +30,8 @@ export function ProfileAvatar({
       <img
         src={resolvedAvatarUrl}
         alt={`${miniDoc.handle} avatar`}
+        loading={loading}
+        decoding="async"
         className={`${sizeClass} shrink-0 rounded-full object-cover ring-2 ring-ctp-surface-1`}
       />
     )
diff --git a/src/components/profile/ProfileByline.tsx b/src/components/profile/ProfileByline.tsx
index 0b38328..b0c4ce8 100644
--- a/src/components/profile/ProfileByline.tsx
+++ b/src/components/profile/ProfileByline.tsx
@@ -38,6 +38,7 @@ export function ProfileByline({
               miniDoc={miniDoc}
               profile={profile}
               bskyProfile={bskyProfile}
+              loading="eager"
               size="small"
             />
             {miniDoc.handle}
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 1345df3..803f510 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -23,7 +23,12 @@ export function ProfileHeader({ miniDoc, profile, blueskyProfile }: ProfileHeade
   return (
     <article className="border-0 bg-transparent p-0 shadow-none">
       <div className="flex items-center gap-4">
-        <ProfileAvatar miniDoc={miniDoc} profile={profile} bskyProfile={blueskyProfile} />
+        <ProfileAvatar
+          miniDoc={miniDoc}
+          profile={profile}
+          bskyProfile={blueskyProfile}
+          loading="eager"
+        />
 
         <div className="min-w-0">
           <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-- 
2.51.2