acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fix TagMenu initial render perf (#6483)

Browse Source 
* Split tag menu dialog content

* Log the actual error please

* Fix it on native
This commit is contained in:
dan
2024-11-18 22:05:51 +00:00
committed by GitHub
parent 1486e5cc5a
commit 4f0f9eb413
2 changed files with 165 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dialog/index.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ export function Outer({
try { try {
cb() cb()
} catch (e: any) { } catch (e: any) {
logger.error('Error running close callback', e) logger.error(e || 'Error running close callback')
} }
} }
src/components/TagMenu/index.tsx
+164 -150
View File
@@ -40,9 +40,37 @@ export function TagMenu({
tag: string tag: string
authorHandle?: string authorHandle?: string
}>) { }>) {
const navigation = useNavigation<NavigationProp>()
return (
<>
{children}
<Dialog.Outer control={control}>
<Dialog.Handle />
<TagMenuInner
control={control}
tag={tag}
authorHandle={authorHandle}
navigation={navigation}
/>
</Dialog.Outer>
</>
)
}
function TagMenuInner({
control,
tag,
authorHandle,
navigation,
}: {
control: Dialog.DialogOuterProps['control']
tag: string
authorHandle?: string
// Passed down because on native, we don't use real portals (and context would be wrong).
navigation: NavigationProp
}) {
const {_} = useLingui() const {_} = useLingui()
const t = useTheme() const t = useTheme()
const navigation = useNavigation<NavigationProp>()
const {isLoading: isPreferencesLoading, data: preferences} = const {isLoading: isPreferencesLoading, data: preferences} =
usePreferencesQuery() usePreferencesQuery()
const { const {
@@ -79,32 +107,75 @@ export function TagMenu({
}, [tag, preferences?.moderationPrefs?.mutedWords]) }, [tag, preferences?.moderationPrefs?.mutedWords])
return ( return (
<> <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
{children} {isPreferencesLoading ? (
<View style={[a.w_full, a.align_center]}>
<Dialog.Outer control={control}> <Loader size="lg" />
<Dialog.Handle /> </View>
<Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}> ) : (
{isPreferencesLoading ? ( <>
<View style={[a.w_full, a.align_center]}> <View
<Loader size="lg" /> style={[
</View> a.rounded_md,
) : ( a.border,
<> a.mb_md,
t.atoms.border_contrast_low,
t.atoms.bg_contrast_25,
]}>
<Link
label={_(msg`View all posts with tag ${displayTag}`)}
{...createStaticClick(() => {
control.close(() => {
navigation.push('Hashtag', {
tag: encodeURIComponent(tag),
})
})
})}>
<View <View
style={[ style={[
a.rounded_md, a.w_full,
a.border, a.flex_row,
a.mb_md, a.align_center,
t.atoms.border_contrast_low, a.justify_start,
t.atoms.bg_contrast_25, a.gap_md,
a.px_lg,
a.py_md,
]}> ]}>
<Search size="lg" style={[t.atoms.text_contrast_medium]} />
<Text
numberOfLines={1}
ellipsizeMode="middle"
style={[
a.flex_1,
a.text_md,
a.font_bold,
native({top: 2}),
t.atoms.text_contrast_medium,
]}>
<Trans>
See{' '}
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
{displayTag}
</Text>{' '}
posts
</Trans>
</Text>
</View>
</Link>
{authorHandle && !isInvalidHandle(authorHandle) && (
<>
<Divider />
<Link <Link
label={_(msg`View all posts with tag ${displayTag}`)} label={_(
msg`View all posts by @${authorHandle} with tag ${displayTag}`,
)}
{...createStaticClick(() => { {...createStaticClick(() => {
control.close(() => { control.close(() => {
navigation.push('Hashtag', { navigation.push('Hashtag', {
tag: encodeURIComponent(tag), tag: encodeURIComponent(tag),
author: authorHandle,
}) })
}) })
})}> })}>
@@ -118,7 +189,7 @@ export function TagMenu({
a.px_lg, a.px_lg,
a.py_md, a.py_md,
]}> ]}>
<Search size="lg" style={[t.atoms.text_contrast_medium]} /> <Person size="lg" style={[t.atoms.text_contrast_medium]} />
<Text <Text
numberOfLines={1} numberOfLines={1}
ellipsizeMode="middle" ellipsizeMode="middle"
@@ -134,143 +205,86 @@ export function TagMenu({
<Text style={[a.text_md, a.font_bold, t.atoms.text]}> <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
{displayTag} {displayTag}
</Text>{' '} </Text>{' '}
posts posts by this user
</Trans> </Trans>
</Text> </Text>
</View> </View>
</Link> </Link>
</>
)}
{authorHandle && !isInvalidHandle(authorHandle) && ( {preferences ? (
<> <>
<Divider /> <Divider />
<Link <Button
label={_( label={
msg`View all posts by @${authorHandle} with tag ${displayTag}`, isMuted
)} ? _(msg`Unmute all ${displayTag} posts`)
{...createStaticClick(() => { : _(msg`Mute all ${displayTag} posts`)
control.close(() => { }
navigation.push('Hashtag', { onPress={() => {
tag: encodeURIComponent(tag), control.close(() => {
author: authorHandle, if (isMuted) {
}) resetUpsert()
}) removeMutedWords(removeableMuteWords)
})}> } else {
<View resetRemove()
style={[ upsertMutedWord([
a.w_full, {
a.flex_row, value: tag,
a.align_center, targets: ['tag'],
a.justify_start, actorTarget: 'all',
a.gap_md, },
a.px_lg, ])
a.py_md,
]}>
<Person
size="lg"
style={[t.atoms.text_contrast_medium]}
/>
<Text
numberOfLines={1}
ellipsizeMode="middle"
style={[
a.flex_1,
a.text_md,
a.font_bold,
native({top: 2}),
t.atoms.text_contrast_medium,
]}>
<Trans>
See{' '}
<Text
style={[a.text_md, a.font_bold, t.atoms.text]}>
{displayTag}
</Text>{' '}
posts by this user
</Trans>
</Text>
</View>
</Link>
</>
)}
{preferences ? (
<>
<Divider />
<Button
label={
isMuted
? _(msg`Unmute all ${displayTag} posts`)
: _(msg`Mute all ${displayTag} posts`)
} }
onPress={() => { })
control.close(() => { }}>
if (isMuted) { <View
resetUpsert() style={[
removeMutedWords(removeableMuteWords) a.w_full,
} else { a.flex_row,
resetRemove() a.align_center,
upsertMutedWord([ a.justify_start,
{ a.gap_md,
value: tag, a.px_lg,
targets: ['tag'], a.py_md,
actorTarget: 'all', ]}>
}, <Mute size="lg" style={[t.atoms.text_contrast_medium]} />
]) <Text
} numberOfLines={1}
}) ellipsizeMode="middle"
}}> style={[
<View a.flex_1,
style={[ a.text_md,
a.w_full, a.font_bold,
a.flex_row, native({top: 2}),
a.align_center, t.atoms.text_contrast_medium,
a.justify_start, ]}>
a.gap_md, {isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '}
a.px_lg, <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
a.py_md, {displayTag}
]}> </Text>{' '}
<Mute <Trans>posts</Trans>
size="lg" </Text>
style={[t.atoms.text_contrast_medium]} </View>
/> </Button>
<Text </>
numberOfLines={1} ) : null}
ellipsizeMode="middle" </View>
style={[
a.flex_1,
a.text_md,
a.font_bold,
native({top: 2}),
t.atoms.text_contrast_medium,
]}>
{isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '}
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
{displayTag}
</Text>{' '}
<Trans>posts</Trans>
</Text>
</View>
</Button>
</>
) : null}
</View>
<Button <Button
label={_(msg`Close this dialog`)} label={_(msg`Close this dialog`)}
size="small" size="small"
variant="ghost" variant="ghost"
color="secondary" color="secondary"
onPress={() => control.close()}> onPress={() => control.close()}>
<ButtonText> <ButtonText>
<Trans>Cancel</Trans> <Trans>Cancel</Trans>
</ButtonText> </ButtonText>
</Button> </Button>
</> </>
)} )}
</Dialog.Inner> </Dialog.Inner>
</Dialog.Outer>
</>
) )
} }