Fix #3302: debounce sidebar rendering

Refresh the MUC sidebar when participants collection is sorted

CHANGES.md

@@ -4,9 +4,11 @@
 
 - #2716: Fix issue with chat display when opening via URL
 - #3033: Add the `muc_grouped_by_domain` option to display MUCs on the same domain in collapsible groups
+- #3302: debounce MUC sidebar rendering
 - #3307: Fix inconsistency between browsers on textarea outlines
 - Add an occupants filter to the MUC sidebar
 - Fix: MUC occupant list does not sort itself on nicknames or roles changes
+- Fix: refresh the MUC sidebar when participants collection is sorted
 
 ### Breaking changes:
 

src/plugins/muc-views/sidebar.js

@@ -4,6 +4,7 @@ import { CustomElement } from 'shared/components/element.js';
 import { _converse, api, converse } from "@converse/headless";
 import { RosterFilter } from 'headless/plugins/roster/filter.js';
 import { initStorage } from "headless/utils/storage";
+import debounce from 'lodash-es/debounce.js';
 
 import 'shared/styles/status.scss';
 import './styles/muc-occupants.scss';
@@ -31,11 +32,19 @@ export default class MUCSidebar extends CustomElement {
         this.filter.fetch();
 
         this.model = _converse.chatboxes.get(this.jid);
-        this.listenTo(this.model.occupants, 'add', () => this.requestUpdate());
-        this.listenTo(this.model.occupants, 'remove', () => this.requestUpdate());
-        this.listenTo(this.model.occupants, 'change', () => this.requestUpdate());
-        this.listenTo(this.model.occupants, 'vcard:change', () => this.requestUpdate());
-        this.listenTo(this.model.occupants, 'vcard:add', () => this.requestUpdate());
+
+        // To avoid rendering continuously the participant list in case of massive joins/leaves:
+        const debouncedRequestUpdate = debounce(() => this.requestUpdate(), 200, {
+            maxWait: 1000
+        });
+
+        this.listenTo(this.model.occupants, 'add', debouncedRequestUpdate);
+        this.listenTo(this.model.occupants, 'remove', debouncedRequestUpdate);
+        this.listenTo(this.model.occupants, 'change', debouncedRequestUpdate);
+        this.listenTo(this.model.occupants, 'sort', debouncedRequestUpdate);
+        this.listenTo(this.model.occupants, 'vcard:change', debouncedRequestUpdate);
+        this.listenTo(this.model.occupants, 'vcard:add', debouncedRequestUpdate);
+
         this.model.initialized.then(() => this.requestUpdate());
     }
 

src/plugins/muc-views/tests/muc.js

@@ -2394,7 +2394,7 @@ describe("Groupchats", function () {
             }).c("query", {"xmlns": "http://jabber.org/protocol/muc#admin"})
             _converse.api.connection.get()._dataRecv(mock.createRequest(result));
             await u.waitUntil(() => view.querySelectorAll('.occupant').length, 500);
-            await u.waitUntil(() => view.querySelectorAll('.badge').length > 1);
+            await u.waitUntil(() => view.querySelectorAll('.badge').length > 2);
             expect(view.model.occupants.length).toBe(2);
             expect(view.querySelectorAll('.occupant').length).toBe(2);
         }));