docs: site date client only (#46230)

* docs: site date client only

* chore: fix style

* chore: fix lint

---------

Co-authored-by: lijianan <574980606@qq.com>

.dumi/pages/index/components/BannerRecommends.tsx

@@ -115,7 +115,7 @@ export const BannerRecommendsFallback: FC = () => {
   return isMobile ? (
     <Carousel className={styles.carousel}>
       {list.map((_, index) => (
-        <div key={index}>
+        <div key={index} className={styles.itemBase}>
           <Skeleton active style={{ padding: '0 24px' }} />
         </div>
       ))}
@@ -123,7 +123,9 @@ export const BannerRecommendsFallback: FC = () => {
   ) : (
     <div className={styles.container}>
       {list.map((_, index) => (
-        <Skeleton key={index} active />
+        <div key={index} className={styles.itemBase}>
+          <Skeleton active />
+        </div>
       ))}
     </div>
   );
@@ -138,6 +140,10 @@ const BannerRecommends: React.FC = () => {
   const icons = data?.icons || [];
   const first3 = !extras || extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
 
+  if (!data) {
+    return <BannerRecommendsFallback />;
+  }
+
   return (
     <div>
       {isMobile ? (

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -94,6 +94,7 @@ const useStyle = () => {
 
       child: css`
         position: relative;
+        width: 100%;
         z-index: 1;
       `,
     };

.dumi/pages/index/components/Theme/index.tsx

@@ -407,8 +407,8 @@ export default function Theme() {
         components: {
           Layout: isLight
             ? {
-                colorBgHeader: 'transparent',
-                colorBgBody: 'transparent',
+                headerBg: 'transparent',
+                bodyBg: 'transparent',
               }
             : {
                 // colorBgBody: 'transparent',

.dumi/pages/index/components/util.ts

@@ -1,5 +1,6 @@
 import { css } from 'antd-style';
-import useFetch from '../../../hooks/useFetch';
+import { useEffect, useState } from 'react';
+import fetch from 'cross-fetch';
 
 export interface Author {
   avatar: string;
@@ -80,8 +81,18 @@ export function preLoad(list: string[]) {
   }
 }
 
-export function useSiteData(): Partial<SiteData> {
-  return useFetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json');
+export function useSiteData(): Partial<SiteData> | undefined {
+  const [data, setData] = useState<SiteData | undefined>(undefined);
+
+  useEffect(() => {
+    fetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json').then(
+      async (res) => {
+        setData(await res.json());
+      },
+    );
+  }, []);
+
+  return data;
 }
 
 export const getCarouselStyle = () => ({

.dumi/pages/index/index.tsx

@@ -4,7 +4,7 @@ import { createStyles, css } from 'antd-style';
 
 import useDark from '../../hooks/useDark';
 import useLocale from '../../hooks/useLocale';
-import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
+import BannerRecommends from './components/BannerRecommends';
 import PreviewBanner from './components/PreviewBanner';
 import Group from './components/Group';
 
@@ -46,9 +46,7 @@ const Homepage: React.FC = () => {
   return (
     <section>
       <PreviewBanner>
-        <Suspense fallback={<BannerRecommendsFallback />}>
-          <BannerRecommends />
-        </Suspense>
+        <BannerRecommends />
       </PreviewBanner>
 
       <div>

.dumi/theme/builtins/ResourceArticles/index.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable react/no-array-index-key */
 import * as React from 'react';
-import { Suspense } from 'react';
 import dayjs from 'dayjs';
 import { FormattedMessage } from 'dumi';
 import { createStyles } from 'antd-style';
 import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd';
-import type { Article, Authors } from '../../../pages/index/components/util';
+import type { Article, Authors, SiteData } from '../../../pages/index/components/util';
 import { useSiteData } from '../../../pages/index/components/util';
 import useLocale from '../../../hooks/useLocale';
 
@@ -97,10 +96,11 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
   );
 };
 
-const Articles: React.FC = () => {
+const Articles: React.FC<{ data: Partial<SiteData> }> = ({ data }) => {
   const [, lang] = useLocale();
   const isZhCN = lang === 'cn';
-  const { articles = { cn: [], en: [] }, authors = [] } = useSiteData();
+
+  const { articles = { cn: [], en: [] }, authors = [] } = data;
 
   // ========================== Data ==========================
   const mergedData = React.useMemo(() => {
@@ -149,11 +149,13 @@ const Articles: React.FC = () => {
 
 export default () => {
   const { styles } = useStyle();
+  const data = useSiteData();
+
+  const articles = data ? <Articles data={data} /> : <Skeleton active />;
+
   return (
     <div id="articles" className={styles.articles}>
-      <Suspense fallback={<Skeleton active />}>
-        <Articles />
-      </Suspense>
+      {articles}
     </div>
   );
 };