chore: move ThemeSwitch into Suspense (ant-design#46731)

sebastibe · Jan 2, 2024 · 17a634b · 17a634b
1 parent 680c512
commit 17a634b
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, Suspense } from 'react';
 import dayjs from 'dayjs';
 import {
   createCache,
@@ -18,11 +18,12 @@ import { DarkContext } from '../../hooks/useDark';
 import useLayoutState from '../../hooks/useLayoutState';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
-import ThemeSwitch from '../common/ThemeSwitch';
 import SiteThemeProvider from '../SiteThemeProvider';
 import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';
 
+const ThemeSwitch = React.lazy(() => import('../common/ThemeSwitch'));
+
 type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];
 type SiteState = Partial<Omit<SiteContextProps, 'updateSiteContext'>>;
 
@@ -174,10 +175,12 @@ const GlobalLayout: React.FC = () => {
     content = (
       <App>
         {outlet}
-        <ThemeSwitch
-          value={theme}
-          onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
-        />
+        <Suspense>
+          <ThemeSwitch
+            value={theme}
+            onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
+          />
+        </Suspense>
       </App>
     );
   }