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([], []);