docs: make Calendar demo client-only (#41359)

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -104,6 +104,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
     background,
     filePath,
     version,
+    clientOnly,
   } = props;
 
   const { pkg } = useSiteData();
@@ -169,6 +170,8 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
     setCodeExpand(expand);
   }, [expand]);
 
+  const mergedChildren = !iframe && clientOnly ? <ClientOnly>{children}</ClientOnly> : children;
+
   if (!liveDemo.current) {
     liveDemo.current = iframe ? (
       <BrowserFrame>
@@ -180,7 +183,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
         />
       </BrowserFrame>
     ) : (
-      children
+      mergedChildren
     );
   }
 

.dumi/theme/common/ClientOnly.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactElement, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 export type ClientOnlyProps = {
   children: ReactNode;
@@ -8,7 +8,7 @@ export type ClientOnlyProps = {
 const ClientOnly: FC<ClientOnlyProps> = ({ children }) => {
   const [clientReady, setClientReady] = useState<boolean>(false);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setClientReady(true);
   }, []);
 

components/calendar/index.en-US.md

@@ -15,11 +15,11 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/notice-calendar.tsx">Notice Calendar</code>
-<code src="./demo/card.tsx">Card</code>
-<code src="./demo/select.tsx">Selectable Calendar</code>
-<code src="./demo/customize-header.tsx">Customize Header</code>
+<code src="./demo/basic.tsx" clientOnly>Basic</code>
+<code src="./demo/notice-calendar.tsx" clientOnly>Notice Calendar</code>
+<code src="./demo/card.tsx" clientOnly>Card</code>
+<code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
+<code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
 
 ## API
 

components/calendar/index.zh-CN.md

@@ -16,11 +16,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/notice-calendar.tsx">通知事项日历</code>
-<code src="./demo/card.tsx">卡片模式</code>
-<code src="./demo/select.tsx">选择功能</code>
-<code src="./demo/customize-header.tsx">自定义头部</code>
+<code src="./demo/basic.tsx" clientOnly>基本</code>
+<code src="./demo/notice-calendar.tsx" clientOnly>通知事项日历</code>
+<code src="./demo/card.tsx" clientOnly>卡片模式</code>
+<code src="./demo/select.tsx" clientOnly>选择功能</code>
+<code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
 
 ## API