refactor: Card loading (#35525)

* feat: card loading with skeleton

* test: update snapshot

* test: add style deps

* chore: import

components/card/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -434,127 +434,21 @@ Array [
       class="ant-card-body"
     >
       <div
-        class="ant-card-loading-content"
+        class="ant-skeleton ant-skeleton-active"
       >
         <div
-          class="ant-row"
+          class="ant-skeleton-content"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
         >
-          <div
+          <ul
-            class="ant-col ant-col-22"
+            class="ant-skeleton-paragraph"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
           >
-            <div
+            <li />
-              class="ant-card-loading-block"
+            <li />
+            <li />
+            <li
+              style="width:61%"
             />
-          </div>
+          </ul>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-8"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-15"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-6"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-18"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-13"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-9"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-4"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-3"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-16"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
         </div>
       </div>
     </div>

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -434,127 +434,21 @@ Array [
       class="ant-card-body"
     >
       <div
-        class="ant-card-loading-content"
+        class="ant-skeleton ant-skeleton-active"
       >
         <div
-          class="ant-row"
+          class="ant-skeleton-content"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
         >
-          <div
+          <ul
-            class="ant-col ant-col-22"
+            class="ant-skeleton-paragraph"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
           >
-            <div
+            <li />
-              class="ant-card-loading-block"
+            <li />
+            <li />
+            <li
+              style="width:61%"
             />
-          </div>
+          </ul>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-8"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-15"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-6"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-18"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-13"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-9"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          role="row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col ant-col-4"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-3"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col ant-col-16"
-            role="cell"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
         </div>
       </div>
     </div>

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -19,128 +19,21 @@ exports[`Card should still have padding when card which set padding to 0 is load
     style="padding: 0px;"
   >
     <div
-      class="ant-card-loading-content"
+      class="ant-skeleton ant-skeleton-active"
-      style="padding: 24px;"
     >
       <div
-        class="ant-row"
+        class="ant-skeleton-content"
-        role="row"
-        style="margin-left: -4px; margin-right: -4px;"
       >
-        <div
+        <ul
-          class="ant-col ant-col-22"
+          class="ant-skeleton-paragraph"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
         >
-          <div
+          <li />
-            class="ant-card-loading-block"
+          <li />
+          <li />
+          <li
+            style="width: 61%;"
           />
-        </div>
+        </ul>
-      </div>
-      <div
-        class="ant-row"
-        role="row"
-        style="margin-left: -4px; margin-right: -4px;"
-      >
-        <div
-          class="ant-col ant-col-8"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-        <div
-          class="ant-col ant-col-15"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-row"
-        role="row"
-        style="margin-left: -4px; margin-right: -4px;"
-      >
-        <div
-          class="ant-col ant-col-6"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-        <div
-          class="ant-col ant-col-18"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-row"
-        role="row"
-        style="margin-left: -4px; margin-right: -4px;"
-      >
-        <div
-          class="ant-col ant-col-13"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-        <div
-          class="ant-col ant-col-9"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-      </div>
-      <div
-        class="ant-row"
-        role="row"
-        style="margin-left: -4px; margin-right: -4px;"
-      >
-        <div
-          class="ant-col ant-col-4"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-        <div
-          class="ant-col ant-col-3"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
-        <div
-          class="ant-col ant-col-16"
-          role="cell"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div
-            class="ant-card-loading-block"
-          />
-        </div>
       </div>
     </div>
   </div>

components/card/index.tsx

@@ -5,10 +5,9 @@ import Grid from './Grid';
 import Meta from './Meta';
 import type { TabsProps } from '../tabs';
 import Tabs from '../tabs';
-import Row from '../row';
-import Col from '../col';
 import { ConfigContext } from '../config-provider';
 import SizeContext from '../config-provider/SizeContext';
+import Skeleton from '../skeleton';
 
 function getAction(actions: React.ReactNode[]) {
   const actionList = actions.map((action, index) => (
@@ -105,34 +104,10 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
 
   const prefixCls = getPrefixCls('card', customizePrefixCls);
 
-  const loadingBlockStyle =
-    bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
-
-  const block = <div className={`${prefixCls}-loading-block`} />;
-
   const loadingBlock = (
-    <div className={`${prefixCls}-loading-content`} style={loadingBlockStyle}>
+    <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
-      <Row gutter={8}>
+      {children}
-        <Col span={22}>{block}</Col>
+    </Skeleton>
-      </Row>
-      <Row gutter={8}>
-        <Col span={8}>{block}</Col>
-        <Col span={15}>{block}</Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={6}>{block}</Col>
-        <Col span={18}>{block}</Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={13}>{block}</Col>
-        <Col span={9}>{block}</Col>
-      </Row>
-      <Row gutter={8}>
-        <Col span={4}>{block}</Col>
-        <Col span={3}>{block}</Col>
-        <Col span={16}>{block}</Col>
-      </Row>
-    </div>
   );
 
   const hasActiveTabKey = activeTabKey !== undefined;

components/card/style/index.less

@@ -271,32 +271,6 @@
   &-loading &-body {
     user-select: none;
   }
-
-  &-loading-content {
-    p {
-      margin: 0;
-    }
-  }
-
-  &-loading-block {
-    height: 14px;
-    margin: 4px 0;
-    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
-    background-size: 600% 600%;
-    border-radius: @card-radius;
-    animation: card-loading 1.4s ease infinite;
-  }
-}
-
-@keyframes card-loading {
-  0%,
-  100% {
-    background-position: 0 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
 }
 
 @import './size';

components/card/style/index.tsx

@@ -3,5 +3,4 @@ import './index.less';
 
 // style dependencies
 import '../../tabs/style';
-import '../../row/style';
+import '../../skeleton/style';
-import '../../col/style';