From f7abffadd77435f869a79a4b51d4c04387abbdce Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 10 Jan 2025 07:32:21 +0000
Subject: [PATCH] buddy_list: Make insert_or_move a bulk operation.

---
 web/src/activity_ui.ts |  7 +---
 web/src/buddy_data.ts  |  5 ---
 web/src/buddy_list.ts  | 90 ++++++++++++++++++++++--------------------
 3 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/web/src/activity_ui.ts b/web/src/activity_ui.ts
index 843ba0bc0d..6c3fd1708b 100644
--- a/web/src/activity_ui.ts
+++ b/web/src/activity_ui.ts
@@ -92,12 +92,7 @@ export function redraw_user(user_id: number): void {
         return;
     }
 
-    const info = buddy_data.get_item(user_id);
-
-    buddy_list.insert_or_move({
-        user_id,
-        item: info,
-    });
+    buddy_list.insert_or_move([user_id]);
     update_presence_indicators();
 }
 
diff --git a/web/src/buddy_data.ts b/web/src/buddy_data.ts
index 0d03f9965c..e0bea31337 100644
--- a/web/src/buddy_data.ts
+++ b/web/src/buddy_data.ts
@@ -319,11 +319,6 @@ export function get_title_data(user_ids_string: string, is_group: boolean): Titl
     };
 }
 
-export function get_item(user_id: number): BuddyUserInfo {
-    const info = info_for(user_id);
-    return info;
-}
-
 export function get_items_for_users(user_ids: number[]): BuddyUserInfo[] {
     const user_info = user_ids.map((user_id) => info_for(user_id));
     return user_info;
diff --git a/web/src/buddy_list.ts b/web/src/buddy_list.ts
index 7503e7f938..c93aa98dbf 100644
--- a/web/src/buddy_list.ts
+++ b/web/src/buddy_list.ts
@@ -928,52 +928,58 @@ export class BuddyList extends BuddyListConf {
         this.update_padding();
     }
 
-    insert_or_move(opts: {user_id: number; item: BuddyUserInfo}): void {
-        const user_id = opts.user_id;
-        const item = opts.item;
+    insert_or_move(user_ids: number[]): void {
+        // TODO: Further optimize this function by clubbing DOM updates from
+        // multiple insertions/movements into a single update.
 
-        this.maybe_remove_user_id({user_id});
+        const all_participant_ids = this.render_data.all_participant_ids;
+        const users = buddy_data.get_items_for_users(user_ids);
+        for (const user of users) {
+            const user_id = user.user_id;
 
-        const new_pos_in_all_users = this.find_position({
-            user_id,
-            user_id_list: this.all_user_ids,
-        });
+            this.maybe_remove_user_id({user_id});
 
-        const current_sub = narrow_state.stream_sub();
-        const pm_ids_set = narrow_state.pm_ids_set();
-        const is_subscribed_user = buddy_data.user_matches_narrow(
-            user_id,
-            pm_ids_set,
-            current_sub?.stream_id,
-        );
-        let user_id_list;
-        if (this.render_data.all_participant_ids.has(user_id)) {
-            user_id_list = this.participant_user_ids;
-        } else if (is_subscribed_user) {
-            user_id_list = this.users_matching_view_ids;
-        } else {
-            user_id_list = this.other_user_ids;
+            const new_pos_in_all_users = this.find_position({
+                user_id,
+                user_id_list: this.all_user_ids,
+            });
+
+            const current_sub = narrow_state.stream_sub();
+            const pm_ids_set = narrow_state.pm_ids_set();
+            const is_subscribed_user = buddy_data.user_matches_narrow(
+                user_id,
+                pm_ids_set,
+                current_sub?.stream_id,
+            );
+            let user_id_list;
+            if (all_participant_ids.has(user_id)) {
+                user_id_list = this.participant_user_ids;
+            } else if (is_subscribed_user) {
+                user_id_list = this.users_matching_view_ids;
+            } else {
+                user_id_list = this.other_user_ids;
+            }
+            const new_pos_in_user_list = this.find_position({
+                user_id,
+                user_id_list,
+            });
+
+            // Order is important here--get the new_user_id
+            // before mutating our list.  An undefined value
+            // corresponds to appending.
+            const new_user_id = user_id_list[new_pos_in_user_list];
+
+            user_id_list.splice(new_pos_in_user_list, 0, user_id);
+            this.all_user_ids.splice(new_pos_in_all_users, 0, user_id);
+
+            const html = this.item_to_html({item: user});
+            this.insert_new_html({
+                html,
+                new_user_id,
+                is_subscribed_user,
+                is_participant_user: all_participant_ids.has(user_id),
+            });
         }
-        const new_pos_in_user_list = this.find_position({
-            user_id,
-            user_id_list,
-        });
-
-        // Order is important here--get the new_user_id
-        // before mutating our list.  An undefined value
-        // corresponds to appending.
-        const new_user_id = user_id_list[new_pos_in_user_list];
-
-        user_id_list.splice(new_pos_in_user_list, 0, user_id);
-        this.all_user_ids.splice(new_pos_in_all_users, 0, user_id);
-
-        const html = this.item_to_html({item});
-        this.insert_new_html({
-            html,
-            new_user_id,
-            is_subscribed_user,
-            is_participant_user: this.render_data.all_participant_ids.has(user_id),
-        });
     }
 
     fill_screen_with_content(): void {