forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix slow re-renders when toggling content languages (#10128)
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
authored by
Samuel Newman
Claude Opus 4.6 (1M context)
and committed by
GitHub
abe0ca52
07344f70
+24
-7
+24
-7
src/screens/Settings/LanguageSettings.tsx
+24
-7
src/screens/Settings/LanguageSettings.tsx
···
34
34
const langPrefs = useLanguagePrefs()
35
35
const setLangPrefs = useLanguagePrefsApi()
36
36
37
+
// changing langPrefs causes a slow re-render, so we use a local state copy
38
+
// and update that first to drive the UI on this screen to keep it snappy
39
+
const [contentLanguages, _setContentLanguages] = useState(
40
+
langPrefs.contentLanguages,
41
+
)
42
+
const setContentLanguages = useCallback(
43
+
(languages: string[]) => {
44
+
_setContentLanguages(languages)
45
+
// TODO: try using startTransition/useOptimistic when we switch to New Arch
46
+
// Old arch doesn't support concurrent react features so use rAF instead
47
+
requestAnimationFrame(() => {
48
+
setLangPrefs.setContentLanguages(languages)
49
+
})
50
+
},
51
+
[setLangPrefs],
52
+
)
53
+
37
54
const contentLanguagePrefsControl = useDialogControl()
38
55
39
56
const onChangePrimaryLanguage = useCallback(
···
64
81
return [
65
82
...new Set([
66
83
...recentLanguages,
67
-
...langPrefs.contentLanguages,
84
+
...contentLanguages,
68
85
...langPrefs.primaryLanguage,
69
86
]),
70
87
]
71
88
.map(lang => LANGUAGES.find(l => l.code2 === lang))
72
89
.filter(x => !!x)
73
-
}, [recentLanguages, langPrefs.contentLanguages, langPrefs.primaryLanguage])
90
+
}, [recentLanguages, contentLanguages, langPrefs.primaryLanguage])
74
91
75
92
return (
76
93
<Layout.Screen testID="PreferencesLanguagesScreen">
···
167
184
</Trans>
168
185
</Text>
169
186
170
-
{langPrefs.contentLanguages.length === 0 && (
187
+
{contentLanguages.length === 0 && (
171
188
<Admonition type="info">
172
189
<Trans>All languages will be shown in your feeds.</Trans>
173
190
</Admonition>
···
176
193
<View style={[a.w_full, web({maxWidth: 400})]}>
177
194
<Toggle.Group
178
195
label={_(msg`Select content languages`)}
179
-
values={langPrefs.contentLanguages}
180
-
onChange={setLangPrefs.setContentLanguages}>
196
+
values={contentLanguages}
197
+
onChange={setContentLanguages}>
181
198
<Toggle.PanelGroup>
182
199
{possibleLanguages.map((language, index) => {
183
200
const name = languageName(language, langPrefs.appLanguage)
···
220
237
feeds.
221
238
</Trans>
222
239
}
223
-
currentLanguages={langPrefs.contentLanguages}
240
+
currentLanguages={contentLanguages}
224
241
onSelectLanguages={languages => {
225
-
setLangPrefs.setContentLanguages(languages)
242
+
setContentLanguages(languages)
226
243
setRecentLanguages(recent => [
227
244
...new Set([...recent, ...languages]),
228
245
])