Execute pinned message 10 by 10

src/hooks/usePinnedEvents.ts

@@ -24,6 +24,7 @@ import { ReadPinsEventId } from "../components/views/right_panel/types";
 import { useMatrixClientContext } from "../contexts/MatrixClientContext";
 import { useAsyncMemo } from "./useAsyncMemo";
 import PinningUtils from "../utils/PinningUtils";
+import { batch } from "../utils/promise.ts";
 
 /**
  * Get the pinned event IDs from a room.
@@ -175,12 +176,11 @@ export function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Ar
     const cli = useMatrixClientContext();
 
     return useAsyncMemo(
-        () =>
-            Promise.all(
-                pinnedEventIds.map(
-                    async (eventId): Promise<MatrixEvent | null> => fetchPinnedEvent(room, eventId, cli),
-                ),
-            ),
+        () => {
+            const fetchPromises = pinnedEventIds.map((eventId) => () => fetchPinnedEvent(room, eventId, cli));
+            // Fetch the pinned events in batches of 10
+            return batch(fetchPromises, 10);
+        },
         [cli, room, pinnedEventIds],
         null,
     );

src/utils/promise.ts

@@ -40,3 +40,18 @@ export async function retry<T, E extends Error>(
     }
     throw lastErr;
 }
+
+/**
+ * Batch promises into groups of a given size.
+ * Execute the promises in parallel, but wait for all promises in a batch to resolve before moving to the next batch.
+ * @param funcs - The promises to batch
+ * @param batchSize - The number of promises to execute in parallel
+ */
+export async function batch<T>(funcs: Array<() => Promise<T>>, batchSize: number): Promise<T[]> {
+    const results: T[] = [];
+    for (let i = 0; i < funcs.length; i += batchSize) {
+        const batch = funcs.slice(i, i + batchSize);
+        results.push(...(await Promise.all(batch.map((f) => f()))));
+    }
+    return results;
+}

test/utils/promise-test.ts

@@ -0,0 +1,59 @@
+/*
+ * 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";
+import { flushPromises } from "../test-utils";
+
+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) => {
+                    setTimeout(() => {
+                        promise2Called = true;
+                        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);
+
+            flushPromises();
+            expect(promise1Called).toBe(true);
+            expect(promise2Called).toBe(false);
+            expect(promise3Called).toBe(false);
+
+            jest.advanceTimersByTime(11);
+            expect(await batchPromise).toEqual([1, 2, 3]);
+        });
+    });
+});