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", () => {

test/components/structures/__snapshots__/MessagePanel-test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessagePanel should handle large numbers of hidden events quickly 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_AutoHideScrollbar mx_ScrollPanel cls"
+    tabindex="-1"
+  >
+    <div
+      class="mx_RoomView_messageListWrapper"
+    >
+      <ol
+        aria-live="polite"
+        class="mx_RoomView_MessageList"
+        style="height: 400px;"
+      />
+    </div>
+  </div>
+  );
+</DocumentFragment>
+`;