Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: peopleList performance problem #3642

Merged
merged 7 commits into from
Jul 16, 2021
Merged

fix: peopleList performance problem #3642

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a34a5d5
refactor: people list render
nuanyang233 Jul 9, 2021
6bc7f7c
Merge branch 'develop' into fix/recipt-performance
nuanyang233 Jul 15, 2021
6a7d616
feat: add all friends tag
nuanyang233 Jul 15, 2021
152c17b
Merge branch 'develop' into fix/recipt-performance
nuanyang233 Jul 15, 2021
d33b580
refactor: move database tasks to background tasks
Jack-Works Jul 13, 2021
ae64666
fix: bugfix
nuanyang233 Jul 15, 2021
9ec5036
refactor: error message
guanbinrui Jul 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 75 additions & 42 deletions packages/maskbook/src/components/shared/SelectPeopleAndGroups/PersonOrGroupInList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMemo } from 'react'
import { memo, useMemo } from 'react'
import { ListItem, Theme, ListItemAvatar, ListItemText } from '@material-ui/core'
import type { DefaultComponentProps } from '@material-ui/core/OverridableComponent'
import type { ListItemTypeMap } from '@material-ui/core/ListItem'
Expand Down Expand Up @@ -37,62 +37,95 @@ const useStyle = makeStyles((theme: Theme) => ({
/**
* Item in the list
*/
export function ProfileOrGroupInList(props: ProfileOrGroupInListProps) {
const { t } = useI18N()
export const ProfileOrGroupInList = memo<ProfileOrGroupInListProps>((props) => {
const classes = useStylesExtends(useStyle(), props)
const nicknamePreviewsForGroup = useNickNamesFromList(isGroup(props.item) ? props.item.members : [])
const listFormat = useIntlListFormat()

const { disabled, ListItemProps: listItemProps, onClick, showAtNetwork } = props
let name = ''
let avatar: ReturnType<typeof Avatar>
let secondaryText: string | undefined = undefined
const groupName = useResolveSpecialGroupName(props.item)
if (isGroup(props.item)) {
const group = props.item
name = groupName
avatar = (
<MuiAvatar>
<GroupIcon />
</MuiAvatar>

if (isGroup(props.item))
return (
<ListItem button disabled={disabled} onClick={onClick} {...listItemProps}>
<GroupListItemContent group={props.item} showAtNetwork={showAtNetwork} />
</ListItem>
Comment on lines +44 to +49
Copy link
Collaborator Author

@nuanyang233 nuanyang233 Jul 9, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me explain here. Because GroupListItem needs to call useNickNamesFromList and useResolveSpecialGroupName. But there are time-consuming operations in these hooks. But the reality is that there are not a lot of Groups. So I extract it to the GroupListItemContent component and added a conditional judgment to reduce unnecessary waste.

image

)
const joined = listFormat(nicknamePreviewsForGroup)
const groupSize = group.members.length
const data = { people: joined, count: groupSize }
if (groupSize === 0) {
secondaryText = t('person_or_group_in_list_0')
} else if (nicknamePreviewsForGroup.length === 0) {
secondaryText = t('person_or_group_in_list_many_no_preview', data)
} else if (groupSize > nicknamePreviewsForGroup.length) {
secondaryText = t('person_or_group_in_list_many', data)
} else {
secondaryText = joined
}

const name = props.item.nickname || props.item.identifier.userId

return (
<ListItem button disabled={disabled} onClick={onClick} {...listItemProps}>
<ListItemAvatar>
<Avatar person={props.item} />
</ListItemAvatar>
<ListItemText
classes={{
root: classes.root,
primary: classes.overflow,
secondary: classes.overflow,
}}
primary={
showAtNetwork ? (
<>
{name}
<span className={classes.networkHint}> @ {props.item.identifier.network}</span>
</>
) : (
name
)
}
secondary={props.item.linkedPersona?.fingerprint.toLowerCase()}
/>
</ListItem>
)
})

function GroupListItemContent({ group, showAtNetwork }: { group: Group; showAtNetwork?: boolean }) {
const { t } = useI18N()
const classes = useStyle()
const nicknamePreviewsForGroup = useNickNamesFromList(group.members)
const listFormat = useIntlListFormat()
const groupName = useResolveSpecialGroupName(group)

const joined = listFormat(nicknamePreviewsForGroup)
const groupSize = group.members.length
const data = { people: joined, count: groupSize }

let secondaryText: string | undefined = undefined
if (groupSize === 0) {
secondaryText = t('person_or_group_in_list_0')
} else if (nicknamePreviewsForGroup.length === 0) {
secondaryText = t('person_or_group_in_list_many_no_preview', data)
} else if (groupSize > nicknamePreviewsForGroup.length) {
secondaryText = t('person_or_group_in_list_many', data)
} else {
const person = props.item
name = person.nickname || person.identifier.userId
avatar = <Avatar person={person} />
secondaryText = person.linkedPersona?.fingerprint.toLowerCase()
secondaryText = joined
}
const withNetwork = (
<>
{name}
<span className={classes.networkHint}> @ {props.item.identifier.network}</span>
</>
)

return (
<ListItem button disabled={disabled} onClick={onClick} {...listItemProps}>
<ListItemAvatar>{avatar}</ListItemAvatar>
<>
<ListItemAvatar>
<MuiAvatar>
<GroupIcon />
</MuiAvatar>
</ListItemAvatar>
<ListItemText
classes={{
root: classes.root,
primary: classes.overflow,
secondary: classes.overflow,
}}
primary={showAtNetwork ? withNetwork : name}
primary={
showAtNetwork ? (
<>
{groupName}
<span className={classes.networkHint}> @ {group.identifier.network}</span>
</>
) : (
groupName
)
}
secondary={secondaryText}
/>
</ListItem>
</>
)
}

Expand Down
17 changes: 14 additions & 3 deletions packages/maskbook/src/components/shared/SelectPeopleAndGroups/SelectPeopleAndGroupsUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useState, useCallback } from 'react'
import { useEffect, useState, useCallback, CSSProperties } from 'react'
import { makeStyles, ListItem, ListItemText, InputBase, Button, List, Box } from '@material-ui/core'
import { useI18N } from '../../../utils'
import type { Profile, Group } from '../../../database'
Expand All @@ -7,6 +7,7 @@ import { ProfileOrGroupInList, ProfileOrGroupInListProps } from './PersonOrGroup
import { ProfileOrGroupInChip, ProfileOrGroupInChipProps } from './PersonOrGroupInChip'
import { ProfileIdentifier, GroupIdentifier } from '../../../database/type'
import { useStylesExtends } from '../../custom-ui-helper'
import { FixedSizeList } from 'react-window'

type ProfileOrGroup = Group | Profile
export interface SelectProfileAndGroupsUIProps<ServeType extends Group | Profile = Group | Profile>
Expand Down Expand Up @@ -140,12 +141,21 @@ export function SelectProfileAndGroupsUI<ServeType extends Group | Profile = Pro
<ListItemText primary={t('no_search_result')} />
</ListItem>
)}
{listAfterSearch.map(PeopleListItem)}
<FixedSizeList
itemSize={56}
itemCount={listAfterSearch.length}
overscanCount={5}
width="100%"
height={400}>
{({ index, style }) =>
listAfterSearch[index] ? PeopleListItem(listAfterSearch[index], style) : null
}
</FixedSizeList>
</List>
</Box>
</div>
)
function PeopleListItem(item: ProfileOrGroup) {
function PeopleListItem(item: ProfileOrGroup, style: CSSProperties) {
if (ignoreMyself && myself && item.identifier.equals(myself.identifier)) return null
return (
<ProfileOrGroupInList
Expand All @@ -163,6 +173,7 @@ export function SelectProfileAndGroupsUI<ServeType extends Group | Profile = Pro
else onSetSelected(selected.concat(item) as ServeType[])
setSearch('')
}}
ListItemProps={{ ...props.ProfileOrGroupInListProps?.ListItemProps, style }}
{...props.ProfileOrGroupInListProps}
/>
)
Expand Down