diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx index 4ec3723c29..3421ef805b 100644 --- a/src/screens/Settings/LanguageSettings.tsx +++ b/src/screens/Settings/LanguageSettings.tsx @@ -34,6 +34,23 @@ export function LanguageSettingsScreen({}: Props) { const langPrefs = useLanguagePrefs() const setLangPrefs = useLanguagePrefsApi() + // changing langPrefs causes a slow re-render, so we use a local state copy + // and update that first to drive the UI on this screen to keep it snappy + const [contentLanguages, _setContentLanguages] = useState( + langPrefs.contentLanguages, + ) + const setContentLanguages = useCallback( + (languages: string[]) => { + _setContentLanguages(languages) + // TODO: try using startTransition/useOptimistic when we switch to New Arch + // Old arch doesn't support concurrent react features so use rAF instead + requestAnimationFrame(() => { + setLangPrefs.setContentLanguages(languages) + }) + }, + [setLangPrefs], + ) + const contentLanguagePrefsControl = useDialogControl() const onChangePrimaryLanguage = useCallback( @@ -64,13 +81,13 @@ export function LanguageSettingsScreen({}: Props) { return [ ...new Set([ ...recentLanguages, - ...langPrefs.contentLanguages, + ...contentLanguages, ...langPrefs.primaryLanguage, ]), ] .map(lang => LANGUAGES.find(l => l.code2 === lang)) .filter(x => !!x) - }, [recentLanguages, langPrefs.contentLanguages, langPrefs.primaryLanguage]) + }, [recentLanguages, contentLanguages, langPrefs.primaryLanguage]) return ( @@ -167,7 +184,7 @@ export function LanguageSettingsScreen({}: Props) { - {langPrefs.contentLanguages.length === 0 && ( + {contentLanguages.length === 0 && ( All languages will be shown in your feeds. @@ -176,8 +193,8 @@ export function LanguageSettingsScreen({}: Props) { + values={contentLanguages} + onChange={setContentLanguages}> {possibleLanguages.map((language, index) => { const name = languageName(language, langPrefs.appLanguage) @@ -220,9 +237,9 @@ export function LanguageSettingsScreen({}: Props) { feeds. } - currentLanguages={langPrefs.contentLanguages} + currentLanguages={contentLanguages} onSelectLanguages={languages => { - setLangPrefs.setContentLanguages(languages) + setContentLanguages(languages) setRecentLanguages(recent => [ ...new Set([...recent, ...languages]), ])