From 97a08423a1ac48f654e9c48af3131c4de457e98e Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 19 Mar 2022 15:21:32 +0800
Subject: [PATCH] fix: button loading animate not work, close #5360

---
 components/button/LoadingIcon.tsx             | 68 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 10 +--
 .../__snapshots__/index.test.js.snap          |  4 +-
 components/button/button.tsx                  | 20 ++++--
 .../__tests__/__snapshots__/demo.test.js.snap |  4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 32 +++++++++
 7 files changed, 124 insertions(+), 16 deletions(-)
 create mode 100644 components/button/LoadingIcon.tsx

diff --git a/components/button/LoadingIcon.tsx b/components/button/LoadingIcon.tsx
new file mode 100644
index 000000000..938969688
--- /dev/null
+++ b/components/button/LoadingIcon.tsx
@@ -0,0 +1,68 @@
+import { defineComponent, nextTick } from 'vue';
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
+import Transition from '../_util/transition';
+const getCollapsedWidth = (node: HTMLSpanElement) => {
+  if (node) {
+    node.style.width = '0px';
+    node.style.opacity = '0';
+    node.style.transform = 'scale(0)';
+  }
+};
+const getRealWidth = (node: HTMLSpanElement) => {
+  nextTick(() => {
+    if (node) {
+      node.style.width = `${node.scrollWidth}px`;
+      node.style.opacity = '1';
+      node.style.transform = 'scale(1)';
+    }
+  });
+};
+const resetStyle = (node: HTMLSpanElement) => {
+  if (node && node.style) {
+    node.style.width = null;
+    node.style.opacity = null;
+    node.style.transform = null;
+  }
+};
+export default defineComponent({
+  name: 'LoadingIcon',
+  props: {
+    prefixCls: String,
+    loading: [Boolean, Object],
+    existIcon: Boolean,
+  },
+  setup(props) {
+    return () => {
+      const { existIcon, prefixCls, loading } = props;
+      if (existIcon) {
+        return (
+          <span class={`${prefixCls}-loading-icon`}>
+            <LoadingOutlined />
+          </span>
+        );
+      }
+      const visible = !!loading;
+      return (
+        <Transition
+          name={`${prefixCls}-loading-icon-motion`}
+          onBeforeEnter={getCollapsedWidth}
+          onEnter={getRealWidth}
+          onAfterEnter={resetStyle}
+          onBeforeLeave={getRealWidth}
+          onLeave={(node: HTMLSpanElement) => {
+            setTimeout(() => {
+              getCollapsedWidth(node);
+            });
+          }}
+          onAfterLeave={resetStyle}
+        >
+          {visible ? (
+            <span class={`${prefixCls}-loading-icon`}>
+              <LoadingOutlined />
+            </span>
+          ) : null}
+        </Transition>
+      );
+    };
+  },
+});
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
index 1753b8ede..7f48f7c3a 100644
--- a/components/button/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -143,9 +143,9 @@ exports[`renders ./components/button/demo/icon.vue correctly 1`] = `
 
 exports[`renders ./components/button/demo/loading.vue correctly 1`] = `
 <div class="ant-space ant-space-horizontal ant-space-align-center" style="width: 100%;">
-  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>Loading</span></button></div>
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
   <!---->
-  <div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>Loading</span></button></div>
+  <div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
   <!---->
 </div>
 <div class="ant-space ant-space-horizontal ant-space-align-center" style="width: 100%;">
@@ -157,11 +157,11 @@ exports[`renders ./components/button/demo/loading.vue correctly 1`] = `
   <!---->
 </div>
 <div class="ant-space ant-space-horizontal ant-space-align-center" style="width: 100%;">
-  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></button></div>
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
   <!---->
-  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading ant-btn-icon-only" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></button></div>
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
   <!---->
-  <div class="ant-space-item"><button class="ant-btn ant-btn-default ant-btn-round ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></button></div>
+  <div class="ant-space-item"><button class="ant-btn ant-btn-default ant-btn-round ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
   <!---->
 </div>
 `;
diff --git a/components/button/__tests__/__snapshots__/index.test.js.snap b/components/button/__tests__/__snapshots__/index.test.js.snap
index 59584b43b..00b3398d8 100644
--- a/components/button/__tests__/__snapshots__/index.test.js.snap
+++ b/components/button/__tests__/__snapshots__/index.test.js.snap
@@ -36,9 +36,9 @@ exports[`Button renders Chinese characters correctly 3`] = `
 </button>
 `;
 
-exports[`Button renders Chinese characters correctly 4`] = `<button class="ant-btn ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>按 钮</span></button>`;
+exports[`Button renders Chinese characters correctly 4`] = `<button class="ant-btn ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>按 钮</span></button>`;
 
-exports[`Button renders Chinese characters correctly 5`] = `<button class="ant-btn ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>按 钮</span></button>`;
+exports[`Button renders Chinese characters correctly 5`] = `<button class="ant-btn ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>按 钮</span></button>`;
 
 exports[`Button renders Chinese characters correctly 6`] = `
 <button class="ant-btn ant-btn-two-chinese-chars" type="button">
diff --git a/components/button/button.tsx b/components/button/button.tsx
index ed66ab872..e83697546 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -11,10 +11,10 @@ import {
 } from 'vue';
 import Wave from '../_util/wave';
 import buttonTypes from './buttonTypes';
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import { flattenChildren, getPropsSlot, initDefaultProps } from '../_util/props-util';
+import { flattenChildren, initDefaultProps } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import devWarning from '../vc-util/devWarning';
+import LoadingIcon from './LoadingIcon';
 
 import type { ButtonType } from './buttonTypes';
 import type { VNode, Ref } from 'vue';
@@ -146,9 +146,8 @@ export default defineComponent({
     });
 
     return () => {
-      const children = flattenChildren(getPropsSlot(slots, props));
-
-      const icon = getPropsSlot(slots, props, 'icon');
+      const { icon = slots.icon?.() } = props;
+      const children = flattenChildren(slots.default?.());
 
       isNeedInserted = children.length === 1 && !icon && !isUnborderedButtonType(props.type);
 
@@ -171,7 +170,16 @@ export default defineComponent({
         delete buttonProps.disabled;
       }
 
-      const iconNode = innerLoading.value ? <LoadingOutlined /> : icon;
+      const iconNode =
+        icon && !innerLoading.value ? (
+          icon
+        ) : (
+          <LoadingIcon
+            existIcon={!!icon}
+            prefixCls={prefixCls.value}
+            loading={!!innerLoading.value}
+          />
+        );
 
       const kids = children.map(child =>
         insertSpace(child, isNeedInserted && autoInsertSpace.value),
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index 27b4ee66b..13c38da83 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -37,13 +37,13 @@ exports[`renders ./components/dropdown/demo/item.vue correctly 1`] = `<!----><a
 exports[`renders ./components/dropdown/demo/loading.vue correctly 1`] = `
 <div class="ant-space ant-space-vertical">
   <div class="ant-space-item" style="margin-bottom: 8px;">
-    <div class="ant-btn-group ant-dropdown-button"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>Submit</span></button>
+    <div class="ant-btn-group ant-dropdown-button"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Submit</span></button>
       <!----><button class="ant-btn ant-btn-primary ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
     </div>
   </div>
   <!---->
   <div class="ant-space-item" style="margin-bottom: 8px;">
-    <div class="ant-btn-group ant-btn-group-sm ant-dropdown-button"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>Submit</span></button>
+    <div class="ant-btn-group ant-btn-group-sm ant-dropdown-button"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Submit</span></button>
       <!----><button class="ant-btn ant-btn-primary ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
     </div>
   </div>
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 43315f4b0..fca78a551 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -116,7 +116,7 @@ exports[`renders ./components/input/demo/search-input.vue correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/search-input-loading.vue correctly 1`] = `<div><span class="ant-input-group-wrapper ant-input-search"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input search loading deault" type="text" class="ant-input"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-loading ant-input-search-button ant-btn-icon-only" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></button></span></span></span><br><br><span class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input search loading with enterButton" type="text" class="ant-input"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></div>`;
+exports[`renders ./components/input/demo/search-input-loading.vue correctly 1`] = `<div><span class="ant-input-group-wrapper ant-input-search"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input search loading deault" type="text" class="ant-input"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-loading ant-input-search-button ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></span></span></span><br><br><span class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input search loading with enterButton" type="text" class="ant-input"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></div>`;
 
 exports[`renders ./components/input/demo/show-count.vue correctly 1`] = `
 <span class="ant-input-affix-wrapper"><!----><input maxlength="20" type="text" class="ant-input"><span class="ant-input-suffix"><!----><span class="ant-input-show-count-suffix">10 / 20</span>
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 3f19508aa..d2c9aa12b 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -70,8 +70,10 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -81,8 +83,10 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -92,8 +96,10 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
           class="ant-btn ant-btn-primary"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Primary
           </span>
@@ -325,8 +331,10 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -336,8 +344,10 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -347,8 +357,10 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
           class="ant-btn ant-btn-primary"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Primary
           </span>
@@ -749,8 +761,10 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -760,8 +774,10 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -771,8 +787,10 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
           class="ant-btn ant-btn-primary"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Primary
           </span>
@@ -785,8 +803,10 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
           style="padding: 0px;"
           type="button"
         >
+          
           <!---->
           
+          
           <span
             aria-label="ellipsis"
             class="anticon anticon-ellipsis"
@@ -956,8 +976,10 @@ exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -967,8 +989,10 @@ exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -978,8 +1002,10 @@ exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
           class="ant-btn ant-btn-primary"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Primary
           </span>
@@ -1205,8 +1231,10 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -1216,8 +1244,10 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
           class="ant-btn"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Operation
           </span>
@@ -1227,8 +1257,10 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
           class="ant-btn ant-btn-primary"
           type="button"
         >
+          
           <!---->
           
+          
           <span>
             Primary
           </span>