refactor: invoke language update logic earlier (#774)

src/components/Settings/GeneralSettings.tsx

@@ -30,7 +30,6 @@ import {
   change_shortcut,
   unregister_shortcut,
 } from "@/commands";
-import platformAdapter from "@/utils/platformAdapter";
 
 export function ThemeOption({
   icon: Icon,
@@ -77,12 +76,6 @@ export default function GeneralSettings() {
 
   const { showTooltip, setShowTooltip, language, setLanguage } = useAppStore();
 
-  useEffect(() => {
-    platformAdapter.invokeBackend("update_app_lang", {
-      lang: language,
-    });
-  }, [language]);
-
   const fetchAutoStartStatus = async () => {
     if (isTauri()) {
       try {

src/routes/layout.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
@@ -24,10 +24,20 @@ import { useExtensionsStore } from "@/stores/extensionsStore";
 export default function Layout() {
   const location = useLocation();
 
-  const activeTheme = useThemeStore((state) => state.activeTheme);
-  const setTheme = useThemeStore((state) => state.setTheme);
-  const isDark = useThemeStore((state) => state.isDark);
-  const setIsDark = useThemeStore((state) => state.setIsDark);
+  const { language } = useAppStore();
+  const { i18n } = useTranslation();
+  const { activeTheme, isDark, setIsDark, setTheme } = useThemeStore();
+  const [langUpdated, setLangUpdated] = useState(false);
+
+  useAsyncEffect(async () => {
+    i18n.changeLanguage(language);
+
+    await platformAdapter.invokeBackend("update_app_lang", {
+      lang: language,
+    });
+
+    setLangUpdated(true);
+  }, [language]);
 
   function updateBodyClass(path: string) {
     const body = document.body;
@@ -85,14 +95,8 @@ export default function Layout() {
 
   useSettingsWindow();
 
-  const { i18n } = useTranslation();
-  const language = useAppStore((state) => state.language);
   const { text: selectionText } = useTextSelection();
 
-  useEffect(() => {
-    i18n.changeLanguage(language);
-  }, [language]);
-
   // Disable right-click for production environment
   useEventListener("contextmenu", (event) => {
     if (import.meta.env.DEV || selectionText) return;
@@ -108,7 +112,7 @@ export default function Layout() {
     platformAdapter.error(message);
   });
 
-  useIconfontScript('app');
+  useIconfontScript("app");
 
   const setDisabledExtensions = useExtensionsStore((state) => {
     return state.setDisabledExtensions;
@@ -131,7 +135,7 @@ export default function Layout() {
 
   return (
     <>
-      <Outlet />
+      {langUpdated && <Outlet />}
       <ErrorNotification />
     </>
   );