From 9ed9c8739726397770308427b53f9638f9e49236 Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Wed, 8 Jan 2025 14:31:02 +0800
Subject: [PATCH] perf: language change slowly

---
 .../src/components/shared/LanguageSwitch.tsx  | 46 ++++++++-----------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/apps/fronted/src/components/shared/LanguageSwitch.tsx b/apps/fronted/src/components/shared/LanguageSwitch.tsx
index 09912fd..86af4a4 100644
--- a/apps/fronted/src/components/shared/LanguageSwitch.tsx
+++ b/apps/fronted/src/components/shared/LanguageSwitch.tsx
@@ -10,23 +10,13 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { locales, localeNames } from "@/i18n/config";
-import updateLocale from "./UpdateLocale";
+
+import { Link, usePathname } from "@/i18n/routing.public";
 
 export default function LanguageSwitch() {
   const locale = useLocale();
   const router = useRouter();
 
-  const handleLanguageChange = async (newLocale: string) => {
-    await updateLocale(newLocale);
-    const currentPath = window.location.pathname;
-    if (currentPath === `/${locale}`) {
-      router.push(`/${newLocale}`);
-    } else {
-      const newPath = currentPath.replace(`/${locale}/`, `/${newLocale}/`);
-      router.push(newPath);
-    }
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -39,20 +29,24 @@ export default function LanguageSwitch() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        {locales.map((loc) => (
-          <DropdownMenuItem
-            key={loc}
-            onClick={() => handleLanguageChange(loc)}
-            className={locale === loc ? "bg-accent" : ""}
-          >
-            <span className="flex items-center gap-2">
-              {localeNames[loc]}
-              {locale === loc && (
-                <span className="text-xs text-muted-foreground">✓</span>
-              )}
-            </span>
-          </DropdownMenuItem>
-        ))}
+        {locales.map((loc) => {
+          const pathname = usePathname();
+          return (
+            <DropdownMenuItem
+              key={loc}
+              className={locale === loc ? "bg-accent" : ""}
+            >
+              <Link className="w-full" href={pathname} locale={loc}>
+                <span className="flex items-center gap-2">
+                  {localeNames[loc]}
+                  {locale === loc && (
+                    <span className="text-xs text-muted-foreground">✓</span>
+                  )}
+                </span>
+              </Link>
+            </DropdownMenuItem>
+          );
+        })}
       </DropdownMenuContent>
     </DropdownMenu>
   );