From 424e5d6ad0467edc852fc487b8383b5650eb209a Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Tue, 5 Nov 2024 15:01:56 -0800
Subject: [PATCH] buddy_list: Add background color placeholder to loading
 avatar.

---
 web/src/buddy_list.ts          | 12 ++++++++++++
 web/styles/app_variables.css   |  2 ++
 web/styles/right_sidebar.css   |  4 ++++
 web/templates/presence_row.hbs |  2 +-
 4 files changed, 19 insertions(+), 1 deletion(-)

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>