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,7 +46,10 @@ export default function MemberSidebar() {
 
 function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
     const client = channel.client;
-    return useMemo(() => {
+    const [entries, setEntries] = useState<MemberListGroup[]>([]);
+
+    useEffect(() => {
+        defer(() => {
             const categories: { [key: string]: [User, string][] } = {
                 online: [],
                 offline: [],
@@ -157,9 +159,12 @@ function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
                 });
             }
 
-        return entries;
+            setEntries(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>
-                <Container>
-                    {/*{isTouchscreenDevice && <div>Group settings go here</div>}*/}
-                </Container>
+            <GenericSidebarBase data-scroll-offset="with-padding">
+                {/*<Container>
+                    {isTouchscreenDevice && <div>Group settings go here</div>}
+                </Container>*/}
 
                 <MemberList entries={entries} context={channel} />
             </GenericSidebarBase>
@@ -205,10 +210,10 @@ export const ServerMemberSidebar = observer(
         const entries = useEntries(channel, keys, true);
 
         return (
-            <GenericSidebarBase>
-                <Container>
-                    {/*{isTouchscreenDevice && <div>Server settings go here</div>}*/}
-                </Container>
+            <GenericSidebarBase data-scroll-offset="with-padding">
+                {/*<Container>
+                    {isTouchscreenDevice && <div>Server settings go here</div>}
+                </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>