diff --git a/package.json b/package.json index 51cfb8df7e..3ad74fe3ba 100644 --- a/package.json +++ b/package.json @@ -148,6 +148,7 @@ "react-focus-lock": "^2.5.1", "react-string-replace": "^1.1.1", "react-transition-group": "^4.4.1", + "@tanstack/react-virtual": "^3.13.6", "react-virtualized": "^9.22.5", "rfc4648": "^1.4.0", "sanitize-filename": "^1.6.3", diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx index 0b5629685c..df8f46fff4 100644 --- a/src/components/views/rooms/MemberList/MemberListView.tsx +++ b/src/components/views/rooms/MemberList/MemberListView.tsx @@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details. import { Form } from "@vector-im/compound-web"; import React, { type JSX } from "react"; -import { List, type ListRowProps } from "react-virtualized/dist/commonjs/List"; -import { AutoSizer } from "react-virtualized"; +import { useVirtualizer } from "@tanstack/react-virtual"; import { Flex } from "../../../utils/Flex"; import { @@ -43,7 +42,7 @@ const MemberListView: React.FC = (props: IProps) => { } }; - const getRowHeight = ({ index }: { index: number }): number => { + const getRowHeight = (index: number): number => { if (vm.members[index] === SEPARATOR) { /** * This is a separator of 2px height rendered between @@ -64,19 +63,14 @@ const MemberListView: React.FC = (props: IProps) => { } }; - const rowRenderer = ({ key, index, style }: ListRowProps): JSX.Element => { - if (index === totalRows) { - // We've rendered all the members, - // now we render an empty div to add some space to the end of the list. - return
; - } - const item = vm.members[index]; - return ( -
- {getRowComponent(item)} -
- ); - }; + const scrollContainer = React.useRef(null); + const virtualizer = useVirtualizer({ + count: totalRows, + getScrollElement: () => scrollContainer.current, + estimateSize: (i) => getRowHeight(i), + overscan: 15, + }); + const items = virtualizer.getVirtualItems(); return ( = (props: IProps) => { header={_t("common|people")} onClose={props.onClose} > - - {({ onKeyDownHandler }) => ( - */} + {/* {({ onKeyDownHandler }) => ( */} + + + + +
+
- - - - - {({ height, width }) => ( - - )} - - - )} - +
+ {items.map((virtualRow: any) => { + const member = vm.members[virtualRow.index]; + return ( +
+ {getRowComponent(member)} +
+ ); + })} +
+
+
+
+ {/* )} */} + {/*
*/}
); }; diff --git a/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx index f5fd5203a5..ea5ce2d485 100644 --- a/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx +++ b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx @@ -54,7 +54,7 @@ export function RoomMemberTileView(props: IProps): JSX.Element { return (