fix: avoid flash of navbar images (logo and theme icon)

web-infra-dev · Mar 28, 2024 · c8ca3f0 · c8ca3f0
1 parent ead0d0a
commit c8ca3f0
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 47 deletions.
diff --git a/.changeset/thin-houses-flash.md b/.changeset/thin-houses-flash.md
@@ -0,0 +1,5 @@
+---
+"@rspress/theme-default": patch
+---
+
+fix: avoid flash of navbar images (logo and theme icon)
diff --git a/packages/theme-default/src/components/Nav/NavBarTitle.tsx b/packages/theme-default/src/components/Nav/NavBarTitle.tsx
@@ -1,42 +1,52 @@
-import { useContext, useEffect, useState } from 'react';
-import {
-  ThemeContext,
-  normalizeImagePath,
-  usePageData,
-  withBase,
-} from '@rspress/runtime';
+import { useMemo } from 'react';
+import { normalizeImagePath, usePageData, withBase } from '@rspress/runtime';
 import styles from './index.module.scss';
-import { getLogoUrl, useLocaleSiteData } from '../../logic';
+import { useLocaleSiteData } from '../../logic';
 
 export const NavBarTitle = () => {
   const { siteData } = usePageData();
   const localeData = useLocaleSiteData();
   const { logo: rawLogo, logoText } = siteData;
   const title = localeData.title ?? siteData.title;
-  const { theme } = useContext(ThemeContext);
-  const [logo, setLogo] = useState(getLogoUrl(rawLogo, theme));
-  const [logoVisible, setLogoVisible] = useState(false);
-
-  useEffect(() => {
-    setLogoVisible(true);
-    const newLogoUrl = getLogoUrl(rawLogo, theme);
-    setLogo(newLogoUrl);
-  }, [theme, rawLogo]);
+  const logo = useMemo(() => {
+    if (!rawLogo) {
+      return null;
+    }
+    if (typeof rawLogo === 'string') {
+      return (
+        <img
+          src={normalizeImagePath(rawLogo)}
+          alt="logo"
+          id="logo"
+          className="mr-4 rspress-logo"
+        />
+      );
+    }
+    return (
+      <>
+        <img
+          src={normalizeImagePath(rawLogo.light)}
+          alt="logo"
+          id="logo"
+          className="mr-4 rspress-logo dark:hidden"
+        />
+        <img
+          src={normalizeImagePath(rawLogo.dark)}
+          alt="logo"
+          id="logo"
+          className="mr-4 rspress-logo hidden dark:block"
+        />
+      </>
+    );
+  }, [rawLogo]);
 
   return (
     <div className={`${styles.navBarTitle}`}>
       <a
         href={withBase(localeData.langRoutePrefix || '/')}
         className="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"
       >
-        {logo && logoVisible && (
-          <img
-            src={normalizeImagePath(logo)}
-            alt="logo"
-            id="logo"
-            className="mr-4 rspress-logo"
-          />
-        )}
+        {logo}
         {logoText && <span>{logoText}</span>}
         {!logo && !logoText && <span>{title}</span>}
       </a>

diff --git a/packages/theme-default/src/components/SwitchAppearance/index.tsx b/packages/theme-default/src/components/SwitchAppearance/index.tsx
@@ -16,7 +16,6 @@ export function SwitchAppearance({ onClick }: { onClick?: () => void }) {
     const isDark = updateUserPreferenceFromStorage();
     setTheme(isDark ? 'dark' : 'light');
   };
-  const [iconVisible, setIconVisible] = useState(false);
 
   useEffect(() => {
     if (isDarkMode()) {
@@ -25,7 +24,6 @@ export function SwitchAppearance({ onClick }: { onClick?: () => void }) {
     if (typeof window !== 'undefined') {
       window.addEventListener('storage', updateAppearanceAndTheme);
     }
-    setIconVisible(true);
     return () => {
       if (typeof window !== 'undefined') {
         window.removeEventListener('storage', updateAppearanceAndTheme);
@@ -43,14 +41,20 @@ export function SwitchAppearance({ onClick }: { onClick?: () => void }) {
       className="md:mr-2 rspress-nav-appearance"
     >
       <div className="p-1 border border-solid border-gray-300 text-gray-400  cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7">
-        {iconVisible && (
-          <SvgWrapper
-            icon={theme === 'light' ? SunSvg : MoonSvg}
-            width="18"
-            height="18"
-            fill="currentColor"
-          />
-        )}
+        <SvgWrapper
+          className="dark:hidden"
+          icon={SunSvg}
+          width="18"
+          height="18"
+          fill="currentColor"
+        />
+        <SvgWrapper
+          className="hidden dark:block"
+          icon={MoonSvg}
+          width="18"
+          height="18"
+          fill="currentColor"
+        />
       </div>
     </div>
   );

diff --git a/packages/theme-default/src/logic/utils.ts b/packages/theme-default/src/logic/utils.ts
@@ -22,18 +22,6 @@ export function isActive(
   );
 }
 
-export function getLogoUrl(
-  rawLogo: string | { dark: string; light: string },
-  theme: 'dark' | 'light',
-) {
-  // If logo is a string, use it directly
-  if (typeof rawLogo === 'string') {
-    return rawLogo;
-  }
-  // If logo is an object, use dark/light mode logo
-  return theme === 'dark' ? rawLogo.dark : rawLogo.light;
-}
-
 export function isMobileDevice() {
   return window.innerWidth <= 1024;
 }