imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Further improve performance with lots of hidden events (#10353)

Browse source 
* Avoid re-calculating shouldShowEvent in getReadReceiptsByShownEvent

* Test that uses a MainGrouper

* Cache more calls to shouldShowEvent
This commit is contained in:
Andy Balaam 2023-03-20 09:50:07 +00:00 • committed by GitHub
parent bc60e59eda
commit ca0dfb6c1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 266 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

50
test/components/structures/MessagePanel-test.tsx
View file

@ -690,6 +690,56 @@ describe("MessagePanel", function () {
const { asFragment } = render(getComponent({ events }, { showHiddenEvents: false }));
expect(asFragment()).toMatchSnapshot();
});
it("should handle lots of room creation events quickly", () => {
// Increase the length of the loop here to test performance issues with
// rendering
const events = [TestUtilsMatrix.mkRoomCreateEvent("@user:id", "!room:id")];
for (let i = 0; i < 100; i++) {
events.push(
TestUtilsMatrix.mkMembership({
mship: "join",
prevMship: "join",
room: "!room:id",
user: "@user:id",
event: true,
skey: "123",
}),
);
}
const { asFragment } = render(getComponent({ events }, { showHiddenEvents: false }));
expect(asFragment()).toMatchSnapshot();
});
it("should handle lots of membership 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.mkMembership({
mship: "join",
prevMship: "join",
room: "!room:id",
user: "@user:id",
event: true,
skey: "123",
}),
);
}
const { asFragment } = render(getComponent({ events }, { showHiddenEvents: true }));
const cpt = asFragment();
// Ignore properties that change every time
cpt.querySelectorAll("li").forEach((li) => {
li.setAttribute("data-scroll-tokens", "__scroll_tokens__");
li.setAttribute("data-testid", "__testid__");
});
expect(cpt).toMatchSnapshot();
});
});
describe("shouldFormContinuation", () => {

129
test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
View file

@ -19,3 +19,132 @@ exports[`MessagePanel should handle large numbers of hidden events quickly 1`] =
);
</DocumentFragment>
`;
exports[`MessagePanel should handle lots of membership 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;"
>
<li
data-scroll-tokens="__scroll_tokens__"
data-testid="__testid__"
>
<div
aria-label="Thu, Jan 1 1970"
class="mx_DateSeparator"
role="separator"
tabindex="-1"
>
<hr
role="none"
/>
<h2
aria-hidden="true"
>
Thu, Jan 1 1970
</h2>
<hr
role="none"
/>
</div>
</li>
<div
class="mx_EventTileBubble mx_HistoryTile"
>
<div
class="mx_EventTileBubble_title"
>
You can't see earlier messages
</div>
</div>
<li
class="mx_GenericEventListSummary"
data-expanded="false"
data-layout="group"
data-scroll-tokens="__scroll_tokens__"
data-testid="__testid__"
>
<div
aria-expanded="false"
class="mx_AccessibleButton mx_GenericEventListSummary_toggle mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
expand
</div>
<div
class="mx_EventTile_line"
>
<div
class="mx_EventTile_info"
>
<span
class="mx_GenericEventListSummary_avatars"
>
<span
class="mx_BaseAvatar"
role="presentation"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 9.1px; width: 14px; line-height: 14px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 14px; height: 14px;"
title="@user:id"
/>
</span>
</span>
<span
class="mx_TextualEvent mx_GenericEventListSummary_summary"
>
<span>
@user:id made no changes 100 times
</span>
</span>
</div>
</div>
</li>
</ol>
</div>
</div>
);
</DocumentFragment>
`;
exports[`MessagePanel should handle lots of room creation 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>
`;