refactor(i18n): lazy load languages (#8456)

closes AF-1397

packages/frontend/core/src/mobile/components/search-result/search-res-label.tsx

@@ -8,8 +8,11 @@ export interface SearchResLabelProps {
 export const SearchResLabel = ({ item }: SearchResLabelProps) => {
   const i18n = useI18n();
 
-  const text = !isI18nString(item.label)
-    ? i18n.t(item.label.title)
-    : i18n.t(item.label);
-  return <HighlightText text={text} start="<b>" end="</b>" />;
+  return (
+    <HighlightText
+      text={i18n.t(isI18nString(item.label) ? item.label : item.label.title)}
+      start="<b>"
+      end="</b>"
+    />
+  );
 };

packages/frontend/core/src/mobile/views/settings/appearance/language.tsx

@@ -1,5 +1,6 @@
-import { useLanguageHelper } from '@affine/core/components/hooks/affine/use-language-helper';
+import { I18nService } from '@affine/core/modules/i18n';
 import { useI18n } from '@affine/i18n';
+import { useLiveData, useService } from '@toeverything/infra';
 import { useMemo } from 'react';
 
 import { SettingDropdownSelect } from '../dropdown-select';
@@ -7,24 +8,24 @@ import { RowLayout } from '../row.layout';
 
 export const LanguageSetting = () => {
   const t = useI18n();
-  const { currentLanguage, languagesList, onLanguageChange } =
-    useLanguageHelper();
+  const i18n = useService(I18nService).i18n;
+  const currentLanguage = useLiveData(i18n.currentLanguage$);
 
   const languageOptions = useMemo(
     () =>
-      languagesList.map(language => ({
+      i18n.languageList.map(language => ({
         label: language.originalName,
-        value: language.tag,
+        value: language.key,
       })),
-    [languagesList]
+    [i18n]
   );
 
   return (
     <RowLayout label={t['com.affine.mobile.setting.appearance.language']()}>
       <SettingDropdownSelect
         options={languageOptions}
-        value={currentLanguage?.tag}
-        onChange={onLanguageChange}
+        value={currentLanguage.key}
+        onChange={i18n.changeLanguage}
         menuOptions={{
           contentOptions: {
             style: {