forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix TagMenu initial render perf (#6483)
* Split tag menu dialog content
* Log the actual error please
* Fix it on native
+165
-151
+1
-1
src/components/Dialog/index.tsx
+1
-1
src/components/Dialog/index.tsx
+164
-150
src/components/TagMenu/index.tsx
+164
-150
src/components/TagMenu/index.tsx
···
40
40
tag: string
41
41
authorHandle?: string
42
42
}>) {
43
+
const navigation = useNavigation<NavigationProp>()
44
+
return (
45
+
<>
46
+
{children}
47
+
<Dialog.Outer control={control}>
48
+
<Dialog.Handle />
49
+
<TagMenuInner
50
+
control={control}
51
+
tag={tag}
52
+
authorHandle={authorHandle}
53
+
navigation={navigation}
54
+
/>
55
+
</Dialog.Outer>
56
+
</>
57
+
)
58
+
}
59
+
60
+
function TagMenuInner({
61
+
control,
62
+
tag,
63
+
authorHandle,
64
+
navigation,
65
+
}: {
66
+
control: Dialog.DialogOuterProps['control']
67
+
tag: string
68
+
authorHandle?: string
69
+
// Passed down because on native, we don't use real portals (and context would be wrong).
70
+
navigation: NavigationProp
71
+
}) {
43
72
const {_} = useLingui()
44
73
const t = useTheme()
45
-
const navigation = useNavigation<NavigationProp>()
46
74
const {isLoading: isPreferencesLoading, data: preferences} =
47
75
usePreferencesQuery()
48
76
const {
···
79
107
}, [tag, preferences?.moderationPrefs?.mutedWords])
80
108
81
109
return (
82
-
<>
83
-
{children}
84
-
85
-
<Dialog.Outer control={control}>
86
-
<Dialog.Handle />
87
-
<Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
88
-
{isPreferencesLoading ? (
89
-
<View style={[a.w_full, a.align_center]}>
90
-
<Loader size="lg" />
91
-
</View>
92
-
) : (
93
-
<>
110
+
<Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
111
+
{isPreferencesLoading ? (
112
+
<View style={[a.w_full, a.align_center]}>
113
+
<Loader size="lg" />
114
+
</View>
115
+
) : (
116
+
<>
117
+
<View
118
+
style={[
119
+
a.rounded_md,
120
+
a.border,
121
+
a.mb_md,
122
+
t.atoms.border_contrast_low,
123
+
t.atoms.bg_contrast_25,
124
+
]}>
125
+
<Link
126
+
label={_(msg`View all posts with tag ${displayTag}`)}
127
+
{...createStaticClick(() => {
128
+
control.close(() => {
129
+
navigation.push('Hashtag', {
130
+
tag: encodeURIComponent(tag),
131
+
})
132
+
})
133
+
})}>
94
134
<View
95
135
style={[
96
-
a.rounded_md,
97
-
a.border,
98
-
a.mb_md,
99
-
t.atoms.border_contrast_low,
100
-
t.atoms.bg_contrast_25,
136
+
a.w_full,
137
+
a.flex_row,
138
+
a.align_center,
139
+
a.justify_start,
140
+
a.gap_md,
141
+
a.px_lg,
142
+
a.py_md,
101
143
]}>
144
+
<Search size="lg" style={[t.atoms.text_contrast_medium]} />
145
+
<Text
146
+
numberOfLines={1}
147
+
ellipsizeMode="middle"
148
+
style={[
149
+
a.flex_1,
150
+
a.text_md,
151
+
a.font_bold,
152
+
native({top: 2}),
153
+
t.atoms.text_contrast_medium,
154
+
]}>
155
+
<Trans>
156
+
See{' '}
157
+
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
158
+
{displayTag}
159
+
</Text>{' '}
160
+
posts
161
+
</Trans>
162
+
</Text>
163
+
</View>
164
+
</Link>
165
+
166
+
{authorHandle && !isInvalidHandle(authorHandle) && (
167
+
<>
168
+
<Divider />
169
+
102
170
<Link
103
-
label={_(msg`View all posts with tag ${displayTag}`)}
171
+
label={_(
172
+
msg`View all posts by @${authorHandle} with tag ${displayTag}`,
173
+
)}
104
174
{...createStaticClick(() => {
105
175
control.close(() => {
106
176
navigation.push('Hashtag', {
107
177
tag: encodeURIComponent(tag),
178
+
author: authorHandle,
108
179
})
109
180
})
110
181
})}>
···
118
189
a.px_lg,
119
190
a.py_md,
120
191
]}>
121
-
<Search size="lg" style={[t.atoms.text_contrast_medium]} />
192
+
<Person size="lg" style={[t.atoms.text_contrast_medium]} />
122
193
<Text
123
194
numberOfLines={1}
124
195
ellipsizeMode="middle"
···
134
205
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
135
206
{displayTag}
136
207
</Text>{' '}
137
-
posts
208
+
posts by this user
138
209
</Trans>
139
210
</Text>
140
211
</View>
141
212
</Link>
142
-
143
-
{authorHandle && !isInvalidHandle(authorHandle) && (
144
-
<>
145
-
<Divider />
146
-
147
-
<Link
148
-
label={_(
149
-
msg`View all posts by @${authorHandle} with tag ${displayTag}`,
150
-
)}
151
-
{...createStaticClick(() => {
152
-
control.close(() => {
153
-
navigation.push('Hashtag', {
154
-
tag: encodeURIComponent(tag),
155
-
author: authorHandle,
156
-
})
157
-
})
158
-
})}>
159
-
<View
160
-
style={[
161
-
a.w_full,
162
-
a.flex_row,
163
-
a.align_center,
164
-
a.justify_start,
165
-
a.gap_md,
166
-
a.px_lg,
167
-
a.py_md,
168
-
]}>
169
-
<Person
170
-
size="lg"
171
-
style={[t.atoms.text_contrast_medium]}
172
-
/>
173
-
<Text
174
-
numberOfLines={1}
175
-
ellipsizeMode="middle"
176
-
style={[
177
-
a.flex_1,
178
-
a.text_md,
179
-
a.font_bold,
180
-
native({top: 2}),
181
-
t.atoms.text_contrast_medium,
182
-
]}>
183
-
<Trans>
184
-
See{' '}
185
-
<Text
186
-
style={[a.text_md, a.font_bold, t.atoms.text]}>
187
-
{displayTag}
188
-
</Text>{' '}
189
-
posts by this user
190
-
</Trans>
191
-
</Text>
192
-
</View>
193
-
</Link>
194
-
</>
195
-
)}
213
+
</>
214
+
)}
196
215
197
-
{preferences ? (
198
-
<>
199
-
<Divider />
216
+
{preferences ? (
217
+
<>
218
+
<Divider />
200
219
201
-
<Button
202
-
label={
203
-
isMuted
204
-
? _(msg`Unmute all ${displayTag} posts`)
205
-
: _(msg`Mute all ${displayTag} posts`)
220
+
<Button
221
+
label={
222
+
isMuted
223
+
? _(msg`Unmute all ${displayTag} posts`)
224
+
: _(msg`Mute all ${displayTag} posts`)
225
+
}
226
+
onPress={() => {
227
+
control.close(() => {
228
+
if (isMuted) {
229
+
resetUpsert()
230
+
removeMutedWords(removeableMuteWords)
231
+
} else {
232
+
resetRemove()
233
+
upsertMutedWord([
234
+
{
235
+
value: tag,
236
+
targets: ['tag'],
237
+
actorTarget: 'all',
238
+
},
239
+
])
206
240
}
207
-
onPress={() => {
208
-
control.close(() => {
209
-
if (isMuted) {
210
-
resetUpsert()
211
-
removeMutedWords(removeableMuteWords)
212
-
} else {
213
-
resetRemove()
214
-
upsertMutedWord([
215
-
{
216
-
value: tag,
217
-
targets: ['tag'],
218
-
actorTarget: 'all',
219
-
},
220
-
])
221
-
}
222
-
})
223
-
}}>
224
-
<View
225
-
style={[
226
-
a.w_full,
227
-
a.flex_row,
228
-
a.align_center,
229
-
a.justify_start,
230
-
a.gap_md,
231
-
a.px_lg,
232
-
a.py_md,
233
-
]}>
234
-
<Mute
235
-
size="lg"
236
-
style={[t.atoms.text_contrast_medium]}
237
-
/>
238
-
<Text
239
-
numberOfLines={1}
240
-
ellipsizeMode="middle"
241
-
style={[
242
-
a.flex_1,
243
-
a.text_md,
244
-
a.font_bold,
245
-
native({top: 2}),
246
-
t.atoms.text_contrast_medium,
247
-
]}>
248
-
{isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '}
249
-
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
250
-
{displayTag}
251
-
</Text>{' '}
252
-
<Trans>posts</Trans>
253
-
</Text>
254
-
</View>
255
-
</Button>
256
-
</>
257
-
) : null}
258
-
</View>
241
+
})
242
+
}}>
243
+
<View
244
+
style={[
245
+
a.w_full,
246
+
a.flex_row,
247
+
a.align_center,
248
+
a.justify_start,
249
+
a.gap_md,
250
+
a.px_lg,
251
+
a.py_md,
252
+
]}>
253
+
<Mute size="lg" style={[t.atoms.text_contrast_medium]} />
254
+
<Text
255
+
numberOfLines={1}
256
+
ellipsizeMode="middle"
257
+
style={[
258
+
a.flex_1,
259
+
a.text_md,
260
+
a.font_bold,
261
+
native({top: 2}),
262
+
t.atoms.text_contrast_medium,
263
+
]}>
264
+
{isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '}
265
+
<Text style={[a.text_md, a.font_bold, t.atoms.text]}>
266
+
{displayTag}
267
+
</Text>{' '}
268
+
<Trans>posts</Trans>
269
+
</Text>
270
+
</View>
271
+
</Button>
272
+
</>
273
+
) : null}
274
+
</View>
259
275
260
-
<Button
261
-
label={_(msg`Close this dialog`)}
262
-
size="small"
263
-
variant="ghost"
264
-
color="secondary"
265
-
onPress={() => control.close()}>
266
-
<ButtonText>
267
-
<Trans>Cancel</Trans>
268
-
</ButtonText>
269
-
</Button>
270
-
</>
271
-
)}
272
-
</Dialog.Inner>
273
-
</Dialog.Outer>
274
-
</>
276
+
<Button
277
+
label={_(msg`Close this dialog`)}
278
+
size="small"
279
+
variant="ghost"
280
+
color="secondary"
281
+
onPress={() => control.close()}>
282
+
<ButtonText>
283
+
<Trans>Cancel</Trans>
284
+
</ButtonText>
285
+
</Button>
286
+
</>
287
+
)}
288
+
</Dialog.Inner>
275
289
)
276
290
}