Fix huge usage bandwidth and performance issue of pinned message banner. (#37)

* Return only the first 100 pinned messages

* Execute pinned message 10 by 10

test/components/views/right_panel/PinnedMessagesCard-test.tsx

@@ -196,6 +196,21 @@ describe("<PinnedMessagesCard />", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
+    it("should not show more than 100 messages", async () => {
+        const events = Array.from({ length: 120 }, (_, i) =>
+            mkMessage({
+                event: true,
+                room: "!room:example.org",
+                user: "@alice:example.org",
+                msg: `The message ${i}`,
+                ts: i,
+            }),
+        );
+        await initPinnedMessagesCard(events, []);
+
+        expect(screen.queryAllByRole("listitem")).toHaveLength(100);
+    });
+
     it("should updates when messages are pinned", async () => {
         // Start with nothing pinned
         const { addLocalPinEvent, addNonLocalPinEvent } = await initPinnedMessagesCard([], []);

test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

@@ -358,7 +358,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 aria-label="Open menu"
                 class="_icon-button_bh2qc_17"
                 data-state="closed"
-                id="radix-18"
+                id="radix-218"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -424,7 +424,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 aria-label="Open menu"
                 class="_icon-button_bh2qc_17"
                 data-state="closed"
-                id="radix-19"
+                id="radix-219"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"

test/utils/promise-test.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ *
+ */
+
+import { batch } from "../../src/utils/promise.ts";
+
+describe("promise.ts", () => {
+    describe("batch", () => {
+        afterEach(() => jest.useRealTimers());
+
+        it("should batch promises into groups of a given size", async () => {
+            const promises = [() => Promise.resolve(1), () => Promise.resolve(2), () => Promise.resolve(3)];
+            const batchSize = 2;
+            const result = await batch(promises, batchSize);
+            expect(result).toEqual([1, 2, 3]);
+        });
+
+        it("should wait for the current batch to finish to request the next one", async () => {
+            jest.useFakeTimers();
+
+            let promise1Called = false;
+            const promise1 = () =>
+                new Promise<number>((resolve) => {
+                    promise1Called = true;
+                    resolve(1);
+                });
+            let promise2Called = false;
+            const promise2 = () =>
+                new Promise<number>((resolve) => {
+                    promise2Called = true;
+                    setTimeout(() => {
+                        resolve(2);
+                    }, 10);
+                });
+
+            let promise3Called = false;
+            const promise3 = () =>
+                new Promise<number>((resolve) => {
+                    promise3Called = true;
+                    resolve(3);
+                });
+            const batchSize = 2;
+            const batchPromise = batch([promise1, promise2, promise3], batchSize);
+
+            expect(promise1Called).toBe(true);
+            expect(promise2Called).toBe(true);
+            expect(promise3Called).toBe(false);
+
+            jest.advanceTimersByTime(11);
+            expect(await batchPromise).toEqual([1, 2, 3]);
+        });
+    });
+});