fix(SW-705): Added Suspense to LanguageSwitcher

components/Current/Header/MainMenu/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { usePathname } from "next/navigation"
+import { Suspense } from "react"
 import { useIntl } from "react-intl"
 
 import { logout } from "@/constants/routes/handleAuth"
@@ -9,6 +10,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"
@@ -112,16 +114,14 @@ export function MainMenu({
           >
             <ul className={styles.linkRow}>
               {!isThreeStaticPagesPathnames && !!user ? (
-                <>
-                  <li className={styles.mobileLinkRow}>
-                    <Link
-                      className={styles.mobileLinkButton}
-                      href={myPages[lang]}
-                    >
-                      {intl.formatMessage({ id: "My pages" })}
-                    </Link>
-                  </li>
-                </>
+                <li className={styles.mobileLinkRow}>
+                  <Link
+                    className={styles.mobileLinkButton}
+                    href={myPages[lang]}
+                  >
+                    {intl.formatMessage({ id: "My pages" })}
+                  </Link>
+                </li>
               ) : (
                 <>
                   <li>
@@ -190,7 +190,13 @@ export function MainMenu({
               ))}
             </ul>
             {languageSwitcher ? (
-              <li className={styles.mobileLi}>{languageSwitcher}</li>
+              <li className={styles.mobileLi}>
+                <Suspense
+                  fallback={<SkeletonShimmer height="20px" width="10ch" />}
+                >
+                  {languageSwitcher}
+                </Suspense>
+              </li>
             ) : null}
             {!!user ? (
               <li className={`${styles.mobileLi} ${styles.logout}`}>

components/Current/Header/TopMenu/index.tsx

@@ -1,8 +1,11 @@
+import { Suspense } from "react"
+
 import { logout } from "@/constants/routes/handleAuth"
 import { overview } from "@/constants/routes/myPages"
 import { getName } from "@/lib/trpc/memoizedRequests"
 
 import LoginButton from "@/components/LoginButton"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
@@ -32,7 +35,13 @@ export default async function TopMenu({
 
         <ul className={styles.list}>
           {languageSwitcher ? (
-            <li className={styles.langSwitcher}>{languageSwitcher}</li>
+            <li className={styles.langSwitcher}>
+              <Suspense
+                fallback={<SkeletonShimmer height="20px" width="10ch" />}
+              >
+                {languageSwitcher}
+              </Suspense>
+            </li>
           ) : null}
 
           {links.map(({ link }, i) => (

components/Footer/Details/index.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
@@ -86,7 +88,9 @@ export default async function FooterDetails() {
             )}
           </nav>
           {languages?.urls ? (
-            <LanguageSwitcher type="footer" urls={languages.urls} />
+            <Suspense fallback={<SkeletonShimmer height="20px" width="10ch" />}>
+              <LanguageSwitcher type="footer" urls={languages.urls} />
+            </Suspense>
           ) : null}
         </div>
       </div>