buddy_list: Add background color placeholder to loading avatar.

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 {

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%);

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;
     }

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>