Exclude ThemeToggle btn from SSR

Author: ShubhamOulkar

apps/site/components/withNavBar.tsx

@@ -2,7 +2,6 @@
 
 import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
-import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
 import NavBar from '@node-core/ui-components/Containers/NavBar';
 // TODO(@AvivKeller): I don't like that we are importing styles from another module
 import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
@@ -11,7 +10,6 @@ import type { SimpleLocaleConfig } from '@node-core/ui-components/types';
 import dynamic from 'next/dynamic';
 import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
-import { useState, useEffect } from 'react';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
@@ -28,6 +26,16 @@ const SearchButton = dynamic(() => import('#site/components/Common/Search'), {
   ),
 });
 
+const ThemeToggle = dynamic(
+  () => import('@node-core/ui-components/Common/ThemeToggle'),
+  {
+    ssr: false,
+    loading: () => (
+      <Skeleton className={styles.themeToggleSkeleton} loading={true} />
+    ),
+  }
+);
+
 const WithNavBar: FC = () => {
   const { navigationItems } = useSiteNavigation();
   const { resolvedTheme, setTheme } = useTheme();
@@ -36,16 +44,12 @@ const WithNavBar: FC = () => {
   const t = useTranslations();
 
   const locale = useLocale();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
 
   const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
-  const themeToggleAriaLabel = !mounted
-    ? t('components.common.themeToggle.loading')
-    : resolvedTheme === 'dark'
+  const themeToggleAriaLabel =
+    resolvedTheme === 'dark'
       ? t('components.common.themeToggle.light')
       : t('components.common.themeToggle.dark');
 

apps/site/tests/e2e/general-behavior.spec.ts

@@ -13,8 +13,6 @@ const locators = {
   navLinksLocator: `[aria-label="${englishLocale.components.containers.navBar.controls.toggle}"] + div`,
   // Global UI controls
   languageDropdownName: englishLocale.components.common.languageDropdown.label,
-  // Initially, the themeToggle's name will be the light mode i18n.
-  themeToggleName: englishLocale.components.common.themeToggle.loading,
   themeToggleAriaLabels: {
     light: englishLocale.components.common.themeToggle.light,
     dark: englishLocale.components.common.themeToggle.dark,
@@ -30,6 +28,11 @@ const getTheme = (page: Page) =>
     () => document.documentElement.dataset.theme as 'light' | 'dark'
   );
 
+const getCurrentAriaLabel = (theme: string) =>
+  theme === 'dark'
+    ? locators.themeToggleAriaLabels.light
+    : locators.themeToggleAriaLabels.dark;
+
 const openLanguageMenu = async (page: Page) => {
   const button = page.getByRole('button', {
     name: locators.languageDropdownName,
@@ -71,30 +74,27 @@ test.describe('Node.js Website', () => {
   test.describe('Theme', () => {
     test('should toggle between light/dark themes', async ({ page }) => {
       const themeToggle = page.getByRole('button', {
-        name: locators.themeToggleName,
+        name: /Switch to (Light|Dark) Mode/i,
       });
-      await expect(themeToggle).toBeVisible();
 
       const initialTheme = await getTheme(page);
-      const initialAriaLabel = await themeToggle.getAttribute('aria-label');
-      expect(initialAriaLabel).toBe(
-        locators.themeToggleAriaLabels[initialTheme]
-      );
+      const initialAriaLabel = getCurrentAriaLabel(initialTheme);
+      let currentAriaLabel = await themeToggle.getAttribute('aria-label');
+      expect(currentAriaLabel).toBe(initialAriaLabel);
 
       await themeToggle.click();
 
       const newTheme = await getTheme(page);
-      const newAriaLabel = await themeToggle.getAttribute('aria-label');
+      const newAriaLabel = getCurrentAriaLabel(newTheme);
+      currentAriaLabel = await themeToggle.getAttribute('aria-label');
 
       expect(newTheme).not.toBe(initialTheme);
-      expect(['light', 'dark']).toContain(newTheme);
-
-      expect(newAriaLabel).toBe(locators.themeToggleAriaLabels[newTheme]);
+      expect(currentAriaLabel).toBe(newAriaLabel);
     });
 
     test('should persist theme across page navigation', async ({ page }) => {
       const themeToggle = page.getByRole('button', {
-        name: locators.themeToggleName,
+        name: /Switch to (Light|Dark) Mode/i,
       });
       await themeToggle.click();
       const selectedTheme = await getTheme(page);

packages/i18n/src/locales/en.json

@@ -229,7 +229,6 @@
         "label": "Choose Language"
       },
       "themeToggle": {
-        "loading": "Loading theme label...",
         "light": "Switch to Light Mode",
         "dark": "Switch to Dark Mode"
       }

packages/ui-components/src/Containers/NavBar/index.module.css

@@ -108,6 +108,12 @@ span.searchButtonSkeleton {
   }
 }
 
+span.themeToggleSkeleton {
+  @apply size-9
+    rounded-md
+    py-4;
+}
+
 .ghIconWrapper {
   @apply size-9
     rounded-md