fix: peopleList performance problem

packages/maskbook/src/_locales/en/messages.json

@@ -190,6 +190,7 @@
     "search_box_placeholder": "Type here to search",
     "select_all": "Select All",
     "select_none": "Select None",
+    "all_friends": "All Friends",
     "select_specific_friends_dialog__button": "Done",
     "select_specific_friends_dialog__title": "Select Specific Contacts",
     "service_decryption_failed": "Decryption failed.",

packages/maskbook/src/_locales/ja/messages.json

@@ -190,6 +190,7 @@
     "search_box_placeholder": "ここに打って検索",
     "select_all": "全て選ぶ",
     "select_none": "何も選んでいません。",
+    "all_friends": "",
     "select_specific_friends_dialog__button": "完了",
     "select_specific_friends_dialog__title": "特定の連絡先を選ぶ",
     "service_decryption_failed": "復号に失敗",

packages/maskbook/src/_locales/ko/messages.json

@@ -190,6 +190,7 @@
     "search_box_placeholder": "여기서 검색하기",
     "select_all": "전체 선택",
     "select_none": "전체 선택 취소",
+    "all_friends": "",
     "select_specific_friends_dialog__button": "닫기",
     "select_specific_friends_dialog__title": "지정 연락처 선택",
     "service_decryption_failed": "해독 실패",

packages/maskbook/src/_locales/zh/messages.json

@@ -190,6 +190,7 @@
     "search_box_placeholder": "在這裡輸入以搜尋",
     "select_all": "選擇全部",
     "select_none": "取消選擇全部",
+    "all_friends": "",
     "select_specific_friends_dialog__button": "完成",
     "select_specific_friends_dialog__title": "選擇特定聯絡人",
     "service_decryption_failed": "解密失敗。",

packages/maskbook/src/components/shared/SelectPeopleAndGroups/PersonOrGroupInList.tsx

@@ -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'
@@ -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>
         )
-        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>
+        </>
     )
 }
 

packages/maskbook/src/components/shared/SelectPeopleAndGroups/SelectPeopleAndGroupsUI.tsx

@@ -1,12 +1,13 @@
-import { useEffect, useState, useCallback } from 'react'
-import { makeStyles, ListItem, ListItemText, InputBase, Button, List, Box } from '@material-ui/core'
+import { useEffect, useState, useCallback, CSSProperties } from 'react'
+import { makeStyles, ListItem, ListItemText, InputBase, Button, List, Box, Chip } from '@material-ui/core'
 import { useI18N } from '../../../utils'
 import type { Profile, Group } from '../../../database'
 import { useCurrentIdentity } from '../../DataSource/useActivatedUI'
 import { ProfileOrGroupInList, ProfileOrGroupInListProps } from './PersonOrGroupInList'
 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>
@@ -87,29 +88,44 @@ export function SelectProfileAndGroupsUI<ServeType extends Group | Profile = Pro
     )
     const showSelectAll = !hideSelectAll && listAfterSearch.length > 0 && typeof maxSelection === 'undefined'
     const showSelectNone = !hideSelectNone && selected.length > 0
+
     return (
         <div className={classes.root}>
             <Box
                 className={classes.selectedArea}
                 sx={{
                     display: 'flex',
                 }}>
-                {frozenSelected.map((x) => FrozenChip(x, props.ProfileOrGroupInChipProps))}
-                {selected
-                    .filter((item) => !frozenSelected.includes(item as ServeType))
-                    .map((item) => (
-                        <ProfileOrGroupInChip
-                            disabled={disabled}
-                            key={item.identifier.toText()}
-                            item={item}
-                            onDelete={() =>
-                                onSetSelected(
-                                    selected.filter((x) => !x.identifier.equals(item.identifier)) as ServeType[],
-                                )
-                            }
-                            {...props.ProfileOrGroupInChipProps}
-                        />
-                    ))}
+                {frozenSelected.length === items.length || !listBeforeSearch.length ? (
+                    <Chip
+                        disabled={disabled}
+                        style={{ marginRight: 6, marginBottom: 6 }}
+                        color="primary"
+                        onDelete={frozenSelected.length !== items.length ? () => onSetSelected([]) : undefined}
+                        label={t('all_friends')}
+                    />
+                ) : (
+                    <>
+                        {frozenSelected.map((x) => FrozenChip(x, props.ProfileOrGroupInChipProps))}
+                        {selected
+                            .filter((item) => !frozenSelected.includes(item as ServeType))
+                            .map((item) => (
+                                <ProfileOrGroupInChip
+                                    disabled={disabled}
+                                    key={item.identifier.toText()}
+                                    item={item}
+                                    onDelete={() =>
+                                        onSetSelected(
+                                            selected.filter(
+                                                (x) => !x.identifier.equals(item.identifier),
+                                            ) as ServeType[],
+                                        )
+                                    }
+                                    {...props.ProfileOrGroupInChipProps}
+                                />
+                            ))}
+                    </>
+                )}
                 <InputBase
                     className={classes.input}
                     value={disabled ? '' : search}
@@ -140,12 +156,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
@@ -163,6 +188,7 @@ export function SelectProfileAndGroupsUI<ServeType extends Group | Profile = Pro
                     else onSetSelected(selected.concat(item) as ServeType[])
                     setSearch('')
                 }}
+                ListItemProps={{ ...props.ProfileOrGroupInListProps?.ListItemProps, style }}
                 {...props.ProfileOrGroupInListProps}
             />
         )

packages/maskbook/src/database/index.ts

@@ -1,5 +1,3 @@
-import './migrate/index'
-import './tasks/index'
 export * from './helpers/avatar'
 export * from './helpers/group'
 export * from './Persona/helpers'

packages/maskbook/src/database/tasks/clean-avatar-profile.ts → packages/maskbook/src/extension/background-script/Jobs/DatabaseCleanup/CleanProfileAndAvatar.ts

@@ -1,8 +1,9 @@
-import { createAvatarDBAccess, queryAvatarOutdatedDB, deleteAvatarsDB } from '../avatar'
-import { createTransaction } from '../helpers/openDB'
-import { consistentPersonaDBWriteAccess } from '../Persona/Persona.db'
-import { Identifier, ProfileIdentifier, GroupIdentifier } from '../type'
-import { IdentifierMap } from '../IdentifierMap'
+import { createAvatarDBAccess, queryAvatarOutdatedDB, deleteAvatarsDB } from '../../../../database/avatar'
+import { createTransaction } from '../../../../database/helpers/openDB'
+import { consistentPersonaDBWriteAccess } from '../../../../database/Persona/Persona.db'
+import { Identifier, ProfileIdentifier, GroupIdentifier } from '../../../../database/type'
+import { IdentifierMap } from '../../../../database/IdentifierMap'
+import { untilDocumentReady } from '../../../../utils'
 
 async function cleanAvatarDB(anotherList: IdentifierMap<ProfileIdentifier | GroupIdentifier, undefined>) {
     const t = createTransaction(await createAvatarDBAccess(), 'readwrite')('avatars', 'metadata')
@@ -13,8 +14,10 @@ async function cleanAvatarDB(anotherList: IdentifierMap<ProfileIdentifier | Grou
     await deleteAvatarsDB(Array.from(anotherList.keys()), t)
 }
 
-export async function cleanProfileWithNoLinkedPersona() {
-    setTimeout(cleanProfileWithNoLinkedPersona, 1000 * 60 * 60 * 24 * 7 /** days */)
+export default async function cleanProfileWithNoLinkedPersona(signal: AbortSignal) {
+    await untilDocumentReady()
+    const timeout = setTimeout(cleanProfileWithNoLinkedPersona, 1000 * 60 * 60 * 24 /** 1 day */)
+    signal.addEventListener('abort', () => clearTimeout(timeout))
 
     const cleanedList = new IdentifierMap<ProfileIdentifier | GroupIdentifier, undefined>(
         new Map(),
@@ -23,6 +26,7 @@ export async function cleanProfileWithNoLinkedPersona() {
     )
     const expired = new Date(Date.now() - 1000 * 60 * 60 * 24 * 14 /** days */)
     await consistentPersonaDBWriteAccess(async (t) => {
+        if (signal.aborted) throw new Error('')
         for await (const x of t.objectStore('profiles')) {
             if (x.value.linkedPersona) continue
             if (expired < x.value.updatedAt) continue

packages/maskbook/src/database/migrate/_deprecated_people_db.ts → packages/maskbook/src/extension/background-script/Jobs/MigrateDatabase/_deprecated_people_db.ts

@@ -1,5 +1,4 @@
 /* eslint-disable import/no-deprecated */
-/// <reference path="../global.d.ts" />
 /**
  * @deprecated
  * This database is deprecated since Mask 1.8.10
@@ -24,12 +23,12 @@
  * @type {Record<string, AESJsonWebKey>} Record of <userId, CryptoKey>
  * @keys outline, string, which means network.
  */
-import { GroupIdentifier, Identifier, ProfileIdentifier } from '../type'
+import { GroupIdentifier, Identifier, ProfileIdentifier } from '../../../../database/type'
 import { DBSchema, openDB } from 'idb/with-async-ittr-cjs'
-import { JsonWebKeyToCryptoKey, getKeyParameter } from '../../utils/type-transform/CryptoKey-JsonWebKey'
+import { JsonWebKeyToCryptoKey, getKeyParameter } from '../../../../utils/type-transform/CryptoKey-JsonWebKey'
 import { assertEnvironment, Environment } from '@dimensiondev/holoflows-kit'
-import { createDBAccess } from '../helpers/openDB'
-import type { AESJsonWebKey } from '../../modules/CryptoAlgorithm/interfaces/utils'
+import { createDBAccess } from '../../../../database/helpers/openDB'
+import type { AESJsonWebKey } from '../../../../modules/CryptoAlgorithm/interfaces/utils'
 
 assertEnvironment(Environment.ManifestBackground)
 //#region Type and utils

packages/maskbook/src/database/migrate/create.user.group.for.old.users.ts → packages/maskbook/src/extension/background-script/Jobs/MigrateDatabase/create.user.group.for.old.users.ts

@@ -1,7 +1,7 @@
-import { queryUserGroupDatabase } from '../group'
-import { GroupIdentifier } from '../type'
-import { createDefaultFriendsGroup } from '../helpers/group'
-import { queryMyProfiles } from '../../extension/background-script/IdentityService'
+import { queryUserGroupDatabase } from '../../../../database/group'
+import { GroupIdentifier } from '@masknet/shared'
+import { createDefaultFriendsGroup } from '../../UserGroupService'
+import { queryMyProfiles } from '../../IdentityService'
 
 /**
  * If an identity has no default user group, create one

packages/maskbook/src/database/migrate/fix.qr.private.key.bug.ts → packages/maskbook/src/extension/background-script/Jobs/MigrateDatabase/fix.qr.private.key.bug.ts

@@ -1,6 +1,6 @@
-import { setStorage } from '../../utils/browser.storage'
-import { queryPersonasWithPrivateKey } from '../Persona/Persona.db'
-import { deletePersona } from '../Persona/helpers'
+import { setStorage } from '../../../../utils/browser.storage'
+import { queryPersonasWithPrivateKey } from '../../../../database/Persona/Persona.db'
+import { deletePersona } from '../../../../database/Persona/helpers'
 
 /**
  * There is a bug that when use QR to import key, the private ket lost its secret.

packages/maskbook/src/database/migrate/index.ts → packages/maskbook/src/extension/background-script/Jobs/MigrateDatabase/index.ts

@@ -1,8 +1,7 @@
 import createUserGroupForOldUsers from './create.user.group.for.old.users'
 import fixQrPrivateKeyBug from './fix.qr.private.key.bug'
 import migratePeopleToPersona from './people.to.persona'
-import { untilDocumentReady } from '../../utils/dom'
-import { sideEffect } from '../../utils/side-effects'
+import { sideEffect, untilDocumentReady } from '../../../../utils'
 
 sideEffect.then(untilDocumentReady).then(run)
 function run() {