cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-26 23:42:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Paul Makles 2022-01-04 13:58:24 +00:00
parent 0609b40f81
commit 136faadcec
2 changed files with 111 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/navigation/right/MemberSidebar.tsx
View file

@ -6,11 +6,10 @@ import { Presence } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels"; import { Channel } from "revolt.js/dist/maps/Channels";
import { Server } from "revolt.js/dist/maps/Servers"; import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users"; 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 { import {
ClientStatus, ClientStatus,
@ -21,14 +20,14 @@ import {
import { GenericSidebarBase } from "../SidebarBase"; import { GenericSidebarBase } from "../SidebarBase";
import MemberList, { MemberListGroup } from "./MemberList"; import MemberList, { MemberListGroup } from "./MemberList";
export const Container = styled.div` /*export const Container = styled.div`
padding-top: 48px; padding-top: 48px;
${isTouchscreenDevice && ${isTouchscreenDevice &&
css` css`
padding-top: 0; padding-top: 0;
`} `}
`; `;*/
export default function MemberSidebar() { export default function MemberSidebar() {
const channel = useClient().channels.get( const channel = useClient().channels.get(
@ -47,7 +46,10 @@ export default function MemberSidebar() {
function useEntries(channel: Channel, keys: string[], isServer?: boolean) { function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
const client = channel.client; const client = channel.client;
return useMemo(() => { const [entries, setEntries] = useState<MemberListGroup[]>([]);
useEffect(() => {
defer(() => {
const categories: { [key: string]: [User, string][] } = { const categories: { [key: string]: [User, string][] } = {
online: [], online: [],
offline: [], offline: [],
@ -157,9 +159,12 @@ function useEntries(channel: Channel, keys: string[], isServer?: boolean) {
}); });
} }
return entries; setEntries(entries);
});
// eslint-disable-next-line // eslint-disable-next-line
}, [keys]); }, [keys]);
return entries;
} }
export const GroupMemberSidebar = observer( export const GroupMemberSidebar = observer(
@ -168,10 +173,10 @@ export const GroupMemberSidebar = observer(
const entries = useEntries(channel, keys); const entries = useEntries(channel, keys);
return ( 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} /> <MemberList entries={entries} context={channel} />
</GenericSidebarBase> </GenericSidebarBase>
@ -205,10 +210,10 @@ export const ServerMemberSidebar = observer(
const entries = useEntries(channel, keys, true); const entries = useEntries(channel, keys, true);
return ( 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} /> <MemberList entries={entries} context={channel} />
</GenericSidebarBase> </GenericSidebarBase>
); );

2
src/components/navigation/right/Search.tsx
View file

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