fix: LanguagePicker menu button

differentiate sync vs lazy loaded buttons in Nav/Client/index.tsx. Sync load Button as usual for LanguagePicker; `dynamic` load a separate instance to lazy load theme switcher separately.

Author: wackerow

src/components/Nav/Client/index.tsx

@@ -11,13 +11,14 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
+import { Button } from "../../ui/buttons/Button"
 import { useNavigation } from "../useNavigation"
 import { useThemeToggle } from "../useThemeToggle"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import { useTranslation } from "@/hooks/useTranslation"
 
-const Button = dynamic(
+const LazyButton = dynamic(
   () => import("../../ui/buttons/Button").then((mod) => mod.Button),
   {
     ssr: false,
@@ -126,15 +127,15 @@ const ClientSideNav = () => {
         </SearchProvider>
 
         {desktopScreen && (
-          <Button
+          <LazyButton
             aria-label={themeIconAriaLabel}
             variant="ghost"
             isSecondary
             className="group animate-fade-in px-2 max-md:hidden xl:px-3 [&>svg]:transition-transform [&>svg]:duration-500 [&>svg]:hover:rotate-12 [&>svg]:hover:text-primary-hover"
             onClick={toggleColorMode}
           >
             <ThemeIcon className="transform-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500" />
-          </Button>
+          </LazyButton>
         )}
 
         {desktopScreen && (
@@ -156,6 +157,4 @@ const ClientSideNav = () => {
   )
 }
 
-ClientSideNav.displayName = "ClientSideNav"
-
 export default ClientSideNav