[FIX] mail: fix slow follower insertion

Before this commit, follower insertion checked if a follower
was already in the thread's follower list by using
`Array.prototype.includes`. Since this method must run through
every item in the array to tell whether or not a follower is
present, it is extremly slow with large arrays (especially
since it is called for each follower).

This would slow down the tab for threads having lots of follower
(issue starts appering at 5k+ followers).

This PR solves the issue by replacing thread follower lists by
sets. With this change, inserting even 15k+ follower is almost
instantaneous since the membership test is done in O(1) instead
of O(n).

closes odoo/odoo#127833

X-original-commit: 406c91c8cba32e01eaa8df4b7fb9d0e3ad821e9c
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core/common/suggestion_service.js

@@ -208,8 +208,9 @@ export class SuggestionService {
                 }
             }
             if (thread) {
-                const isFollower1 = thread.followers.some((follower) => follower.partner === p1);
-                const isFollower2 = thread.followers.some((follower) => follower.partner === p2);
+                const followerList = [...thread.followers];
+                const isFollower1 = followerList.some((follower) => follower.partner === p1);
+                const isFollower2 = followerList.some((follower) => follower.partner === p2);
                 if (isFollower1 && !isFollower2) {
                     return -1;
                 }

addons/mail/static/src/core/common/thread_model.js

@@ -51,8 +51,8 @@ export class Thread {
     customName;
     /** @type {string} */
     description;
-    /** @type {import("@mail/core/common/follower_model").Follower[]} */
-    followers = [];
+    /** @type {Set<import("@mail/core/common/follower_model").Follower>} */
+    followers = new Set();
     isAdmin = false;
     loadOlder = false;
     loadNewer = false;
@@ -256,7 +256,12 @@ export class Thread {
      * @returns {import("@mail/core/common/follower_model").Follower}
      */
     get followerOfSelf() {
-        return this.followers.find((f) => f.partner === this._store.self);
+        for (const follower of this.followers) {
+            if (follower.partner === this._store.self) {
+                return follower;
+            }
+        }
+        return undefined;
     }
 
     get imgUrl() {

addons/mail/static/src/core/web/chatter.js

@@ -201,7 +201,7 @@ export class Chatter extends Component {
      * @returns {string}
      */
     get toRecipientsText() {
-        const followers = this.state.thread.followers.slice(0, 5).map(({ partner }) => {
+        const followers = [...this.state.thread.followers].slice(0, 5).map(({ partner }) => {
             if (partner === this.store.self) {
                 return `<span class="text-muted" title="${escape(partner.email)}">me</span>`;
             }
@@ -213,7 +213,7 @@ export class Chatter extends Component {
             this.store.env.services["user"].lang?.replace("_", "-"),
             { type: "unit" }
         );
-        if (this.state.thread.followers.length > 5) {
+        if (this.state.thread.followers.size > 5) {
             followers.push("…");
         }
         return markup(formatter.format(followers));

addons/mail/static/src/core/web/chatter.xml

@@ -35,17 +35,17 @@
                     <Dropdown t-if="props.hasFollowers" position="'bottom-end'" disabled="isDisabled" class="'o-mail-Followers d-flex me-1'" menuClass="'o-mail-Followers-dropdown flex-column p-0'" menuDisplay="'d-flex'" title="followerButtonLabel" togglerClass="'o-mail-Followers-button btn btn-link text-action px-1 ' + (props.compactHeight ? '' : 'my-2')">
                         <t t-set-slot="toggler">
                             <i class="fa fa-user-o" role="img"/>
-                            <span class="o-mail-Followers-counter ps-1" t-esc="state.thread.followers.length"/>
+                            <span class="o-mail-Followers-counter ps-1" t-esc="state.thread.followers.size"/>
                         </t>
                         <t t-set-slot="default">
                             <t t-if="state.thread.hasWriteAccess">
                                 <a class="dropdown-item" href="#" role="menuitem" t-on-click.prevent="onClickAddFollowers">
                                     Add Followers
                                 </a>
-                                <div t-if="state.thread.followers.length > 0" role="separator" class="dropdown-divider"/>
+                                <div t-if="state.thread.followers.size > 0" role="separator" class="dropdown-divider"/>
                             </t>
-                            <t t-if="state.thread.followers.length > 0">
-                                <div t-foreach="state.thread.followers" t-as="follower" t-key="follower.id" class="dropdown-item o-mail-Follower d-flex justify-content-between p-0">
+                            <t t-if="state.thread.followers.size > 0">
+                                <div t-foreach="[...state.thread.followers]" t-as="follower" t-key="follower.id" class="dropdown-item o-mail-Follower d-flex justify-content-between p-0">
                                     <a class="o-mail-Follower-details d-flex align-items-center flex-grow-1 px-3 text-700 o-min-width-0" t-att-class="{ 'o-inactive fst-italic opacity-25': !follower.isActive }" href="#" role="menuitem" t-on-click.prevent="(ev) => this.onClickDetails(ev, follower)">
                                         <img class="o-mail-Follower-avatar me-2 rounded" t-att-src="threadService.avatarUrl(follower.partner, state.thread)" alt=""/>
                                         <span class="flex-shrink text-truncate" t-esc="follower.partner.name"/>
@@ -92,7 +92,7 @@
                 </button>
             </div>
             <t t-if="state.thread.composer.type">
-                <t t-if="state.thread.composer.type === 'message' and state.thread.followers.length > 0">
+                <t t-if="state.thread.composer.type === 'message' and state.thread.followers.size > 0">
                     <div class="flex-shrink-0 px-3 pt-3 text-truncate small mb-2" style="margin-left:48px">
                         <span class="fw-bold">To:</span> <t t-out="toRecipientsText"/>
                         <button class="o-mail-Chatter-recipientListButton btn btn-link badge rounded-pill border-0 p-1 ms-1" title="Show all recipients" t-on-click="onClickRecipientList">

addons/mail/static/src/core/web/recipient_list.xml

@@ -4,7 +4,7 @@
     <t t-name="mail.RecipientList" owl="1">
         <div class="o-mail-RecipientList p-2 overflow-auto">
             <ul class="list-unstyled mb-0">
-                <li t-foreach="props.thread.followers" t-as="follower" t-key="follower.id">
+                <li t-foreach="[...props.thread.followers]" t-as="follower" t-key="follower.id">
                     <t t-out="follower.partner.email"/>
                 </li>
             </ul>

addons/mail/static/src/core/web/thread_service_patch.js

@@ -138,9 +138,7 @@ patch(ThreadService.prototype, "mail/core/web", {
             partner: this.personaService.insert({ ...data.partner, type: "partner" }),
             _store: this.store,
         });
-        if (!follower.followedThread.followers.includes(follower)) {
-            follower.followedThread.followers.push(follower);
-        }
+        follower.followedThread.followers.add(follower);
         return follower;
     },
     /**
@@ -190,10 +188,7 @@ patch(ThreadService.prototype, "mail/core/web", {
             [follower.followedThread.id],
             [follower.partner.id],
         ]);
-        const index = follower.followedThread.followers.indexOf(follower);
-        if (index !== -1) {
-            follower.followedThread.followers.splice(index, 1);
-        }
+        follower.followedThread.followers.delete(follower);
         delete this.store.followers[follower.id];
     },
     unpin(thread) {