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

src/hooks/usePinnedEvents.ts

@@ -24,19 +24,22 @@ 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.
+ * The number of pinned events is limited to 100.
  * @param room
  */
 function getPinnedEventIds(room?: Room): string[] {
-    return (
+    const eventIds: string[] =
         room
             ?.getLiveTimeline()
             .getState(EventTimeline.FORWARDS)
             ?.getStateEvents(EventType.RoomPinnedEvents, "")
-            ?.getContent()?.pinned ?? []
-    );
+            ?.getContent()?.pinned ?? [];
+    // Limit the number of pinned events to 100
+    return eventIds.slice(0, 100);
 }
 
 /**
@@ -173,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;
+}