From 8669b8825e1c4de68d88096740269b72bb57cdab Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sun, 24 Mar 2024 15:01:58 +0800
Subject: [PATCH] :bug: fix: fix rerender with ThemeSwitcher

---
 .../createThemeProvider/AntdProvider.tsx      |  2 ++
 .../createThemeProvider/ThemeSwitcher.tsx     | 31 ++++++++-----------
 src/functions/createInstance.ts               |  4 ++-
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/factories/createThemeProvider/AntdProvider.tsx b/src/factories/createThemeProvider/AntdProvider.tsx
index 369bc5d6..4d1ba172 100644
--- a/src/factories/createThemeProvider/AntdProvider.tsx
+++ b/src/factories/createThemeProvider/AntdProvider.tsx
@@ -67,4 +67,6 @@ const AntdProvider: FC<AntdProviderProps> = memo(
   },
 );
 
+AntdProvider.displayName = 'AntdProvider';
+
 export default AntdProvider;
diff --git a/src/factories/createThemeProvider/ThemeSwitcher.tsx b/src/factories/createThemeProvider/ThemeSwitcher.tsx
index 3abde9cb..dd73000d 100644
--- a/src/factories/createThemeProvider/ThemeSwitcher.tsx
+++ b/src/factories/createThemeProvider/ThemeSwitcher.tsx
@@ -1,4 +1,4 @@
-import { FC, memo, ReactNode, useEffect, useLayoutEffect, useState } from 'react';
+import { FC, memo, ReactNode, useLayoutEffect, useState } from 'react';
 import useMergeValue from 'use-merge-value';
 
 import { ThemeModeContext } from '@/context';
@@ -120,16 +120,6 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
       matchBrowserPrefers('dark')?.matches ? 'dark' : 'light',
     );
 
-    const [startObserver, setStartObserver] = useState(false);
-
-    // Wait until after client-side hydration to show
-    useEffect(() => {
-      // 兼容 React18 的 Suspense 问题
-      safeStartTransition(() => {
-        setStartObserver(true);
-      });
-    }, []);
-
     return (
       <ThemeModeContext.Provider
         value={{
@@ -141,17 +131,22 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
           browserPrefers,
         }}
       >
-        {startObserver && (
-          <ThemeObserver
-            themeMode={themeMode}
-            setAppearance={setAppearance}
-            setBrowserPrefers={setBrowserPrefers}
-          />
-        )}
+        {
+          // Wait until after client-side hydration to show
+          typeof window !== 'undefined' && (
+            <ThemeObserver
+              themeMode={themeMode}
+              setAppearance={setAppearance}
+              setBrowserPrefers={setBrowserPrefers}
+            />
+          )
+        }
         {children}
       </ThemeModeContext.Provider>
     );
   },
 );
 
+ThemeSwitcher.displayName = 'ThemeSwitcher';
+
 export default ThemeSwitcher;
diff --git a/src/functions/createInstance.ts b/src/functions/createInstance.ts
index 721ee7f9..eed03259 100644
--- a/src/functions/createInstance.ts
+++ b/src/functions/createInstance.ts
@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, FC } from 'react';
 
 import { CacheManager, createCSS, createEmotion, serializeCSS } from '@/core';
 
@@ -109,6 +109,8 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
     useTheme,
   });
 
+  (ThemeProvider as FC).displayName = 'AntdStyleThemeProvider';
+
   // ******** 上面这些都和主题相关，如果做了任何改动，都需要排查一遍 ************ //
   const { cx } = createCSS(emotion.cache, { hashPriority: internalOptions.hashPriority });
   const { injectGlobal, keyframes } = emotion;