fix: try to avoid freezing UI due to members sidebar (at least after first load)

src/components/navigation/right/MemberSidebar.tsx

@@ -6,11 +6,10 @@ import { Presence } from "revolt-api/types/Users";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { Server } from "revolt.js/dist/maps/Servers";
 import { User } from "revolt.js/dist/maps/Users";
-import styled, { css } from "styled-components";
 
-import { useContext, useEffect, useMemo } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
 
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { defer } from "../../../lib/defer";
 
 import {
     ClientStatus,
@@ -21,14 +20,14 @@ import {
 import { GenericSidebarBase } from "../SidebarBase";
 import MemberList, { MemberListGroup } from "./MemberList";
 
-export const Container = styled.div`
+/*export const Container = styled.div`
     padding-top: 48px;
 
     ${isTouchscreenDevice &&
     css`
         padding-top: 0;
     `}
-`;
+`;*/
 
 export default function MemberSidebar() {
     const channel = useClient().channels.get(
@@ -47,119 +46,125 @@ export default function MemberSidebar() {
 
 function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
     const client = channel.client;
-    return useMemo(() => {
+    const [entries, setEntries] = useState<MemberListGroup[]>([]);
-        const categories: { [key: string]: [User, string][] } = {
-            online: [],
-            offline: [],
-        };
 
-        const categoryInfo: { [key: string]: string } = {};
+    useEffect(() => {
+        defer(() => {
+            const categories: { [key: string]: [User, string][] } = {
+                online: [],
+                offline: [],
+            };
 
-        let roles: Server["roles"] | undefined;
+            const categoryInfo: { [key: string]: string } = {};
-        let roleList: string[];
-        if (
-            channel.channel_type === "TextChannel" ||
-            channel.channel_type === "VoiceChannel"
-        ) {
-            roles = channel.server?.roles;
-            if (roles) {
-                const list = Object.keys(roles)
-                    .map((id) => {
-                        return [id, roles![id], roles![id].rank ?? 0] as [
-                            string,
-                            Role,
-                            number,
-                        ];
-                    })
-                    .filter(([, role]) => role.hoist);
 
-                list.sort((b, a) => b[2] - a[2]);
+            let roles: Server["roles"] | undefined;
+            let roleList: string[];
+            if (
+                channel.channel_type === "TextChannel" ||
+                channel.channel_type === "VoiceChannel"
+            ) {
+                roles = channel.server?.roles;
+                if (roles) {
+                    const list = Object.keys(roles)
+                        .map((id) => {
+                            return [id, roles![id], roles![id].rank ?? 0] as [
+                                string,
+                                Role,
+                                number,
+                            ];
+                        })
+                        .filter(([, role]) => role.hoist);
 
-                list.forEach(([id, role]) => {
+                    list.sort((b, a) => b[2] - a[2]);
-                    if (categories[id]) return;
-                    categories[id] = [];
-                    categoryInfo[id] = role.name;
-                });
 
-                roleList = list.map((x) => x[0]);
+                    list.forEach(([id, role]) => {
-            }
+                        if (categories[id]) return;
-        }
+                        categories[id] = [];
+                        categoryInfo[id] = role.name;
+                    });
 
-        keys.forEach((key) => {
+                    roleList = list.map((x) => x[0]);
-            let u;
+                }
-            if (isServer) {
-                const { server, user } = JSON.parse(key);
-                if (server !== channel.server_id) return;
-                u = client.users.get(user);
-            } else {
-                u = client.users.get(key);
             }
 
-            if (!u) return;
+            keys.forEach((key) => {
-
+                let u;
-            const member = client.members.get(key);
-            const sort = member?.nickname ?? u.username;
-            const entry = [u, sort] as [User, string];
-
-            if (!u.online || u.status?.presence === Presence.Invisible) {
-                categories.offline.push(entry);
-            } else {
                 if (isServer) {
-                    // Sort users into hoisted roles here.
+                    const { server, user } = JSON.parse(key);
-                    if (member?.roles && roles) {
+                    if (server !== channel.server_id) return;
-                        let success = false;
+                    u = client.users.get(user);
-                        for (const role of roleList) {
-                            if (member.roles.includes(role)) {
-                                categories[role].push(entry);
-                                success = true;
-                                break;
-                            }
-                        }
-
-                        if (success) return;
-                    }
                 } else {
-                    // Sort users into "participants" list here.
+                    u = client.users.get(key);
-                    // For voice calls.
                 }
 
-                categories.online.push(entry);
+                if (!u) return;
-            }
-        });
 
-        Object.keys(categories).forEach((key) =>
+                const member = client.members.get(key);
-            categories[key].sort((a, b) => a[1].localeCompare(b[1])),
+                const sort = member?.nickname ?? u.username;
-        );
+                const entry = [u, sort] as [User, string];
 
-        const entries: MemberListGroup[] = [];
+                if (!u.online || u.status?.presence === Presence.Invisible) {
+                    categories.offline.push(entry);
+                } else {
+                    if (isServer) {
+                        // Sort users into hoisted roles here.
+                        if (member?.roles && roles) {
+                            let success = false;
+                            for (const role of roleList) {
+                                if (member.roles.includes(role)) {
+                                    categories[role].push(entry);
+                                    success = true;
+                                    break;
+                                }
+                            }
 
-        Object.keys(categoryInfo).forEach((key) => {
+                            if (success) return;
-            if (categories[key].length > 0) {
+                        }
+                    } else {
+                        // Sort users into "participants" list here.
+                        // For voice calls.
+                    }
+
+                    categories.online.push(entry);
+                }
+            });
+
+            Object.keys(categories).forEach((key) =>
+                categories[key].sort((a, b) => a[1].localeCompare(b[1])),
+            );
+
+            const entries: MemberListGroup[] = [];
+
+            Object.keys(categoryInfo).forEach((key) => {
+                if (categories[key].length > 0) {
+                    entries.push({
+                        type: "role",
+                        name: categoryInfo[key],
+                        users: categories[key].map((x) => x[0]),
+                    });
+                }
+            });
+
+            if (categories.online.length > 0) {
                 entries.push({
-                    type: "role",
+                    type: "online",
-                    name: categoryInfo[key],
+                    users: categories.online.map((x) => x[0]),
-                    users: categories[key].map((x) => x[0]),
                 });
             }
+
+            if (categories.offline.length > 0) {
+                entries.push({
+                    type: "offline",
+                    users: categories.offline.map((x) => x[0]),
+                });
+            }
+
+            setEntries(entries);
         });
-
-        if (categories.online.length > 0) {
-            entries.push({
-                type: "online",
-                users: categories.online.map((x) => x[0]),
-            });
-        }
-
-        if (categories.offline.length > 0) {
-            entries.push({
-                type: "offline",
-                users: categories.offline.map((x) => x[0]),
-            });
-        }
-
-        return entries;
         // eslint-disable-next-line
     }, [keys]);
+
+    return entries;
 }
 
 export const GroupMemberSidebar = observer(
@@ -168,10 +173,10 @@ export const GroupMemberSidebar = observer(
         const entries = useEntries(channel, keys);
 
         return (
-            <GenericSidebarBase>
+            <GenericSidebarBase data-scroll-offset="with-padding">
-                <Container>
+                {/*<Container>
-                    {/*{isTouchscreenDevice && <div>Group settings go here</div>}*/}
+                    {isTouchscreenDevice && <div>Group settings go here</div>}
-                </Container>
+                </Container>*/}
 
                 <MemberList entries={entries} context={channel} />
             </GenericSidebarBase>
@@ -205,10 +210,10 @@ export const ServerMemberSidebar = observer(
         const entries = useEntries(channel, keys, true);
 
         return (
-            <GenericSidebarBase>
+            <GenericSidebarBase data-scroll-offset="with-padding">
-                <Container>
+                {/*<Container>
-                    {/*{isTouchscreenDevice && <div>Server settings go here</div>}*/}
+                    {isTouchscreenDevice && <div>Server settings go here</div>}
-                </Container>
+                </Container>*/}
                 <MemberList entries={entries} context={channel} />
             </GenericSidebarBase>
         );

src/components/navigation/right/Search.tsx

@@ -99,7 +99,7 @@ export function SearchSidebar({ close }: Props) {
     }, [sort]);
 
     return (
-        <GenericSidebarBase>
+        <GenericSidebarBase data-scroll-offset="with-padding">
             <GenericSidebarList>
                 <SearchBase>
                     <Overline type="accent" block hover>