PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Throttle RoomState.members handler to improve performance

Browse source 
Lazy Loading emits a RoomState.members for each member which in the case of a room like
Matrix HQ means it happens over 8000 times in a very short span of time causing the UI
to lock up.
This commit is contained in:
Michael Telatynski 2020-12-09 11:02:30 +00:00
parent 603a1c8ffb
commit 184c73cca4
2 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -43,6 +43,7 @@ import RoomContext from "../../../contexts/RoomContext";
import {UIFeature} from "../../../settings/UIFeature";
import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
import WidgetContextMenu from "../context_menus/WidgetContextMenu";
import {useRoomMembers} from "../../../hooks/useRoomMembers";
interface IProps {
room: Room;
@ -210,14 +211,6 @@ const onRoomSettingsClick = () => {
defaultDispatcher.dispatch({ action: "open_room_settings" });
};
const useMemberCount = (room: Room) => {
const [count, setCount] = useState(room.getJoinedMembers().length);
useEventEmitter(room.currentState, "RoomState.members", () => {
setCount(room.getJoinedMembers().length);
});
return count;
};
const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
const cli = useContext(MatrixClientContext);
@ -251,12 +244,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
</div>
</React.Fragment>;
const memberCount = useMemberCount(room);
const members = useRoomMembers(room);
return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
<Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
<Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
{_t("%(count)s people", { count: memberCount })}
{_t("%(count)s people", { count: members.length })}
</Button>
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{_t("Show files")}

31
src/hooks/useRoomMembers.ts Normal file
View file

@ -0,0 +1,31 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {useState} from "react";
import {Room} from "matrix-js-sdk/src/models/room";
import {RoomMember} from "matrix-js-sdk/src/models/room-member";
import {useEventEmitter} from "./useEventEmitter";
import {throttle} from "lodash";
// Hook to simplify listening to Matrix Room members
export const useRoomMembers = (room: Room, throttleWait = 250) => {
const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers());
useEventEmitter(room.currentState, "RoomState.members", throttle(() => {
setMembers(room.getJoinedMembers());
}, throttleWait, {leading: true, trailing: true}));
return members;
};