From 8609a1f0164d694449528f48c4a17fdf351c9159 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 13 Aug 2021 22:31:28 +0100
Subject: [PATCH] Try optimise members list.

---
 external/lang                                 |  2 +-
 .../navigation/right/MemberList.tsx           | 44 ++++++++++++++-----
 src/pages/settings/server/Members.tsx         |  4 +-
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/external/lang b/external/lang
index b27044c3..6a71c17b 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit b27044c332ca419d22edbe9e7bf465a665398999
+Subproject commit 6a71c17b37127a5f4de7ff455814dd6c4c4df542
diff --git a/src/components/navigation/right/MemberList.tsx b/src/components/navigation/right/MemberList.tsx
index 55ae33b2..3b8c1b63 100644
--- a/src/components/navigation/right/MemberList.tsx
+++ b/src/components/navigation/right/MemberList.tsx
@@ -4,8 +4,12 @@ import { User } from "revolt.js/dist/maps/Users";
 import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
+import { memo } from "preact/compat";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+    Screen,
+    useIntermediate,
+} from "../../../context/intermediate/Intermediate";
 
 import { UserButton } from "../items/ButtonItem";
 
@@ -34,6 +38,31 @@ const ListCategory = styled.div<{ first?: boolean }>`
         `}
 `;
 
+const ItemContent = memo(
+    ({
+        item,
+        context,
+        openScreen,
+    }: {
+        item: User;
+        context: Channel;
+        openScreen: (screen: Screen) => void;
+    }) => (
+        <UserButton
+            key={item._id}
+            user={item}
+            margin
+            context={context}
+            onClick={() =>
+                openScreen({
+                    id: "profile",
+                    user_id: item._id,
+                })
+            }
+        />
+    ),
+);
+
 export default function MemberList({
     entries,
     context,
@@ -74,17 +103,10 @@ export default function MemberList({
 
                 return (
                     <div>
-                        <UserButton
-                            key={item._id}
-                            user={item}
-                            margin
+                        <ItemContent
+                            item={item}
                             context={context}
-                            onClick={() =>
-                                openScreen({
-                                    id: "profile",
-                                    user_id: item._id,
-                                })
-                            }
+                            openScreen={openScreen}
                         />
                     </div>
                 );
diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx
index 02e24f1d..93edf1df 100644
--- a/src/pages/settings/server/Members.tsx
+++ b/src/pages/settings/server/Members.tsx
@@ -79,9 +79,7 @@ export const Members = observer(({ server }: Props) => {
                                 </IconButton>
                             </div>
                             {selected === member._id.user && (
-                                <div
-                                    key={`drop_${member._id.user}`}
-                                    className={styles.memberView}>
+                                <div className={styles.memberView}>
                                     <Overline type="subtle">Roles</Overline>
                                     {Object.keys(server.roles ?? {}).map(
                                         (key) => {