From 57fe6a19400ef8e26ec7f602288221313aab8e71 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 27 Jun 2025 11:43:06 -0700
Subject: [PATCH] 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.
---
 src/components/Nav/Client/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Nav/Client/index.tsx b/src/components/Nav/Client/index.tsx
index 137000918fc..c56372cc7fe 100644
--- a/src/components/Nav/Client/index.tsx
+++ b/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,7 +127,7 @@ const ClientSideNav = () => {
         </SearchProvider>
 
         {desktopScreen && (
-          <Button
+          <LazyButton
             aria-label={themeIconAriaLabel}
             variant="ghost"
             isSecondary
@@ -134,7 +135,7 @@ const ClientSideNav = () => {
             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