diff --git a/web/src/buddy_list.ts b/web/src/buddy_list.ts
index 82378a3974..8ce01cbce8 100644
--- a/web/src/buddy_list.ts
+++ b/web/src/buddy_list.ts
@@ -313,6 +313,18 @@ export class BuddyList extends BuddyListConf {
 
         this.update_empty_list_placeholders();
         this.fill_screen_with_content();
+
+        // `populate` always rerenders all user rows, so we need new load handlers.
+        // This logic only does something is a user has enabled the setting to
+        // view avatars in the buddy list, and otherwise the jQuery selector will
+        // always be the empty set.
+        $("#user-list .user-profile-picture img")
+            .off("load")
+            .on("load", function (this: HTMLElement) {
+                $(this)
+                    .closest(".user-profile-picture")
+                    .toggleClass("avatar-preload-background", false);
+            });
     }
 
     update_empty_list_placeholders(): void {
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 6ba2b2804c..a317829b29 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -650,6 +650,7 @@
     --color-buddy-list-highlighted-user: var(
         --color-background-hover-narrow-filter
     );
+    --color-buddy-list-avatar-loading: hsl(0deg 0% 0% / 10%);
     --color-border-sidebar: hsl(0deg 0% 87%);
     --color-text-sidebar-base: hsl(0deg 0% 0%);
     --color-border-sidebar-subheader: hsl(0deg 0% 0% / 15%);
@@ -1196,6 +1197,7 @@
     --color-buddy-list-highlighted-user: var(
         --color-background-hover-narrow-filter
     );
+    --color-buddy-list-avatar-loading: hsl(0deg 0% 100% / 10%);
     --color-border-sidebar: hsl(0deg 0% 0% / 20%);
     --color-text-sidebar-base: hsl(0deg 0% 100%);
     --color-border-sidebar-subheader: hsl(0deg 0% 100% / 15%);
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index e6d03c61c2..e5994c0924 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -276,6 +276,10 @@ $user_status_emoji_width: 24px;
         margin: 4px;
     }
 
+    .avatar-preload-background {
+        background-color: var(--color-buddy-list-avatar-loading);
+    }
+
     .unread_count:not(.hide) {
         margin-right: 2px;
     }
diff --git a/web/templates/presence_row.hbs b/web/templates/presence_row.hbs
index 3d2f4d5a69..016885b804 100644
--- a/web/templates/presence_row.hbs
+++ b/web/templates/presence_row.hbs
@@ -12,7 +12,7 @@
                 </div>
             </a>
         {{else if user_list_style.WITH_AVATAR}}
-            <div class="user-profile-picture">
+            <div class="user-profile-picture avatar-preload-background">
                 <img loading="lazy" src="{{profile_picture}}"/>
                 <span class="{{user_circle_class}} user_circle"></span>
             </div>