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

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
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")}