change useSyncOnStart() to a hook

app/components/home.tsx

@@ -151,6 +151,33 @@ export function WindowContent(props: { children: React.ReactNode }) {
   );
 }
 
+function useSyncOnStart() {
+  const syncStore = useSyncStore();
+  useEffect(() => {
+    let running = true;
+    setTimeout(async () => {
+      if (!(running && syncStore.cloudSync() && syncStore.autoSync.onStart)) {
+        return;
+      }
+      console.debug("wtf", syncStore.autoSync, syncStore.cloudSync());
+      const dismissSyncingToast = showToast(Locale.Settings.Sync.IsSyncing);
+      try {
+        await syncStore.sync();
+        dismissSyncingToast();
+        showToast(Locale.Settings.Sync.Success);
+      } catch (e: unknown) {
+        dismissSyncingToast();
+        showToast(Locale.Settings.Sync.Fail);
+        console.error("[Sync]", e);
+      }
+    });
+    return () => {
+      running = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+
 function Screen() {
   const config = useAppConfig();
   const location = useLocation();
@@ -167,6 +194,7 @@ function Screen() {
   useEffect(() => {
     loadAsyncGoogleFont();
   }, []);
+  useSyncOnStart();
 
   if (isArtifact) {
     return (
@@ -226,33 +254,10 @@ export function Home() {
   useSwitchTheme();
   useLoadData();
   useHtmlLang();
-  const syncStore = useSyncStore();
-
   useEffect(() => {
     console.log("[Config] got config from build time", getClientConfig());
   }, []);
 
-  useEffect(() => {
-    let running = true;
-
-    setTimeout(async () => {
-      if (running && syncStore.cloudSync() && syncStore.autoSync.onStart) {
-        try {
-          await syncStore.sync();
-          showToast(Locale.Settings.Sync.Success);
-        } catch (e: unknown) {
-          showToast(Locale.Settings.Sync.Fail);
-          console.error("[Sync]", e);
-        }
-      }
-    });
-
-    return () => {
-      running = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (!useHasHydrated()) {
     return <Loading />;
   }

app/locales/cn.ts

@@ -223,6 +223,7 @@ const cn = {
       CloudState: "云端数据",
       NotSyncYet: "还没有进行过同步",
       Success: "同步成功",
+      IsSyncing: "正在同步...",
       Fail: "同步失败",
 
       Config: {

app/locales/en.ts

@@ -225,6 +225,7 @@ const en: LocaleType = {
       CloudState: "Last Update",
       NotSyncYet: "Not sync yet",
       Success: "Sync Success",
+      IsSyncing: "Sync in progress...",
       Fail: "Sync Fail",
 
       Config: {