Improve performance of rendering a room with many hidden events (#10131)

* Test MessagePanel rendering with hidden events

* Cache the results of shouldShowEvent in MessagePanel

* Combine an event and its shouldShow info into a single object

test/components/structures/MessagePanel-test.tsx

@@ -669,6 +669,27 @@ describe("MessagePanel", function () {
         expect(els.length).toEqual(1);
         expect(els[0].getAttribute("data-scroll-tokens")?.split(",")).toHaveLength(3);
     });
+
+    it("should handle large numbers of hidden events quickly", () => {
+        // Increase the length of the loop here to test performance issues with
+        // rendering
+
+        const events = [];
+        for (let i = 0; i < 100; i++) {
+            events.push(
+                TestUtilsMatrix.mkEvent({
+                    event: true,
+                    type: "unknown.event.type",
+                    content: { key: "value" },
+                    room: "!room:id",
+                    user: "@user:id",
+                    ts: 1000000 + i,
+                }),
+            );
+        }
+        const { asFragment } = render(getComponent({ events }, { showHiddenEvents: false }));
+        expect(asFragment()).toMatchSnapshot();
+    });
 });
 
 describe("shouldFormContinuation", () => {