Change to react-virtual

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",

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<IProps> = (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<IProps> = (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 <div key={key} style={style} />;
-        }
-        const item = vm.members[index];
-        return (
-            <div key={key} style={style}>
-                {getRowComponent(item)}
-            </div>
-        );
-    };
+    const scrollContainer = React.useRef<HTMLDivElement | null>(null);
+    const virtualizer = useVirtualizer({
+        count: totalRows,
+        getScrollElement: () => scrollContainer.current,
+        estimateSize: (i) => getRowHeight(i),
+        overscan: 15,
+    });
+    const items = virtualizer.getVirtualItems();
 
     return (
         <BaseCard
@@ -87,34 +81,60 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
             header={_t("common|people")}
             onClose={props.onClose}
         >
-            <RovingTabIndexProvider handleUpDown scrollIntoView>
-                {({ onKeyDownHandler }) => (
-                    <Flex
-                        align="stretch"
-                        direction="column"
-                        className="mx_MemberListView_container"
-                        onKeyDown={onKeyDownHandler}
+            {/* <RovingTabIndexProvider handleUpDown scrollIntoView> */}
+            {/* {({ onKeyDownHandler }) => ( */}
+            <Flex
+                align="stretch"
+                direction="column"
+                className="mx_MemberListView_container"
+                // onKeyDown={onKeyDownHandler}
+            >
+                <Form.Root>
+                    <MemberListHeaderView vm={vm} />
+                </Form.Root>
+                <div
+                    ref={scrollContainer}
+                    style={{
+                        height: "100%",
+                        width: "100%",
+                        overflowY: "auto",
+                        contain: "strict",
+                    }}
+                >
+                    <div
+                        style={{
+                            height: virtualizer.getTotalSize(),
+                            width: "100%",
+                            position: "relative",
+                        }}
                     >
-                        <Form.Root>
-                            <MemberListHeaderView vm={vm} />
-                        </Form.Root>
-                        <AutoSizer>
-                            {({ height, width }) => (
-                                <List
-                                    rowRenderer={rowRenderer}
-                                    rowHeight={getRowHeight}
-                                    // The +1 refers to the additional empty div that we render at the end of the list.
-                                    rowCount={totalRows + 1}
-                                    // Subtract the height of MemberlistHeaderView so that the parent div does not overflow.
-                                    height={height - 113}
-                                    width={width}
-                                    overscanRowCount={15}
-                                />
-                            )}
-                        </AutoSizer>
-                    </Flex>
-                )}
-            </RovingTabIndexProvider>
+                        <div
+                            style={{
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                transform: `translateY(${items[0]?.start ?? 0}px)`,
+                            }}
+                        >
+                            {items.map((virtualRow: any) => {
+                                const member = vm.members[virtualRow.index];
+                                return (
+                                    <div
+                                        key={virtualRow.key}
+                                        data-index={virtualRow.index}
+                                        ref={virtualizer.measureElement}
+                                    >
+                                        {getRowComponent(member)}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </Flex>
+            {/* )} */}
+            {/* </RovingTabIndexProvider> */}
         </BaseCard>
     );
 };

src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx

@@ -54,7 +54,7 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
 
     return (
         <MemberTileView
-            title={vm.title}
+            // title={vm.title}
             onClick={vm.onClick}
             avatarJsx={av}
             presenceJsx={presenceJSX}

yarn.lock

@@ -2873,6 +2873,18 @@
     "@svgr/plugin-jsx" "8.1.0"
     "@svgr/plugin-svgo" "8.1.0"
 
+"@tanstack/react-virtual@^3.13.6":
+  version "3.13.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.13.6.tgz#30243c8c3166673caf66bfbf5352e1b314a3a4cd"
+  integrity sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==
+  dependencies:
+    "@tanstack/virtual-core" "3.13.6"
+
+"@tanstack/virtual-core@3.13.6":
+  version "3.13.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.6.tgz#329f962f1596b3280736c266a982897ed2112157"
+  integrity sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==
+
 "@testcontainers/postgresql@^10.18.0":
   version "10.19.0"
   resolved "https://registry.yarnpkg.com/@testcontainers/postgresql/-/postgresql-10.19.0.tgz#e1ff9fbfee76c23bc899865524ee8e2ee297bdf2"
@@ -3668,7 +3680,7 @@
     classnames "^2.5.1"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.3-cc54d8b3e9472bcd8e622126ba364ee31952cd8a-integrity/node_modules/bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.3-cc54d8b3e9472bcd8e622126ba364ee31952cd8a-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
   uid ""