docs: 💄 improve home page loading style

site/theme/template/Home/Banner/index.tsx

@@ -19,7 +19,7 @@ const Banner = (props: { location: any }) => {
   let qrNode: React.ReactElement | null = null;
   if (isMobile) {
     qrNode = (
-      <a href="http://antd4.antfin.com/">
+      <a href="https://antd4.antfin.com">
         <img
           alt="mobile"
           src="https://gw.alipayobjects.com/zos/basement_prod/d2fa63a8-3e9d-4f59-80c7-1fd1d0cd9118.svg"

site/theme/template/Home/MorePage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { Card, Row, Col, Spin } from 'antd';
+import { Card, Row, Col } from 'antd';
 import { useSiteData } from './util';
 import './MorePage.less';
 
@@ -16,9 +16,10 @@ interface MoreProps {
   source: SourceType;
   href: string;
   icons?: Icons;
+  loading?: boolean;
 }
 
-const MoreCard = ({ title, description, date, img, source, href, icons }: MoreProps) => {
+const MoreCard = ({ title, description, date, img, source, href, icons, loading }: MoreProps) => {
   return (
     <Col xs={24} sm={6}>
       <a
@@ -32,12 +33,17 @@ const MoreCard = ({ title, description, date, img, source, href, icons }: MorePr
           });
         }}
       >
-        <Card hoverable cover={<img alt={title} src={img} />} className="more-card">
+        <Card
+          hoverable
+          cover={loading ? undefined : <img alt={title} src={img} />}
+          loading={loading}
+          className="more-card"
+        >
           <Card.Meta title={title} description={description} />
           <div>
             {date}
             <span className="more-card-source">
-              {icons ? <img src={icons[source]} alt={source} /> : <Spin />}
+              {icons ? <img src={icons[source]} alt={source} /> : null}
             </span>
           </div>
         </Card>
@@ -51,9 +57,12 @@ export default function MorePage() {
   const isZhCN = locale === 'zh-CN';
   const list = useSiteData<MoreProps[]>('extras', isZhCN ? 'cn' : 'en');
   const icons = useSiteData<Icons>('icons');
+  const loadingProps = { loading: true } as MoreProps;
   return (
     <Row gutter={[24, 32]}>
-      {list ? list.map(more => <MoreCard key={more.title} {...more} icons={icons} />) : <Spin />}
+      {(list || [loadingProps, loadingProps, loadingProps, loadingProps]).map(more => (
+        <MoreCard key={more.title} {...more} icons={icons} />
+      ))}
     </Row>
   );
 }

site/theme/template/Home/RecommendPage.less

@@ -17,6 +17,21 @@
     transition: all 0.36s ease-out;
   }
 
+  &-loading {
+    background: linear-gradient(
+      90deg,
+      rgba(207, 216, 220, 0.2),
+      rgba(207, 216, 220, 0.4),
+      rgba(207, 216, 220, 0.2)
+    );
+    border-radius: 4px;
+
+    img,
+    &::before {
+      display: none;
+    }
+  }
+
   &:hover img {
     transform: scale(1.04);
   }

site/theme/template/Home/RecommendPage.tsx

@@ -8,11 +8,12 @@ import './RecommendPage.less';
 const { Title, Paragraph } = Typography;
 
 interface Recommend {
-  title: string;
+  title?: string;
-  img: string;
+  img?: string;
-  href: string;
+  href?: string;
   popularize?: boolean;
-  description: string;
+  description?: string;
+  loading?: boolean;
 }
 
 interface RecommendBlockProps extends Recommend {
@@ -26,10 +27,14 @@ const RecommendBlock = ({
   description,
   img,
   href,
+  loading,
 }: RecommendBlockProps) => {
   return (
     <a
-      className={classNames('recommend-block', main && 'recommend-block-main')}
+      className={classNames('recommend-block', {
+        'recommend-block-main': !!main,
+        'recommend-block-loading': loading,
+      })}
       href={href}
       target="_blank"
       rel="noopener noreferrer"
@@ -58,27 +63,23 @@ export default function RecommendPageo() {
   const { locale } = useIntl();
   const isZhCN = locale === 'zh-CN';
   const list = useSiteData<Recommend[]>('recommendations', isZhCN ? 'cn' : 'en');
+  const isLoading = !list;
+  console.log(list);
   return (
     <Row gutter={[24, 24]} style={{ marginBottom: -36 }}>
-      {list ? (
+      <Col xs={24} sm={14}>
-        <>
+        <RecommendBlock {...(list ? list[0] : {})} main loading={isLoading} />
-          <Col xs={24} sm={14}>
+      </Col>
-            <RecommendBlock {...list[0]} main />
+      <Col xs={24} sm={10}>
+        <Row gutter={[24, 24]}>
+          <Col span={24}>
+            <RecommendBlock {...(list ? list[1] : {})} loading={isLoading} />
           </Col>
-          <Col xs={24} sm={10}>
+          <Col span={24}>
-            <Row gutter={[24, 24]}>
+            <RecommendBlock {...(list ? list[2] : {})} loading={isLoading} />
-              <Col span={24}>
-                <RecommendBlock {...list[1]} />
-              </Col>
-              <Col span={24}>
-                <RecommendBlock {...list[2]} />
-              </Col>
-            </Row>
           </Col>
-        </>
+        </Row>
-      ) : (
+      </Col>
-        <Spin />
-      )}
     </Row>
   );
 }