fix: add button loading animation

Author: tangjinzhou

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 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 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 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 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 6`] = `
 <button class="ant-btn ant-btn-two-chinese-chars" type="button">

components/button/button.tsx

@@ -176,13 +176,7 @@ export default defineComponent({
         onClick: handleClick,
       };
 
-      const iconNode = innerLoading.value ? (
-        <span class={`${prefixCls.value}-loading-icon`}>
-          <LoadingOutlined />
-        </span>
-      ) : (
-        icon
-      );
+      const iconNode = innerLoading.value ? <LoadingOutlined /> : icon;
 
       const kids = children.map(child =>
         insertSpace(child, isNeedInserted && autoInsertSpace.value),

components/button/style/index.less

@@ -155,25 +155,39 @@
     }
   }
 
-  & > &-loading-icon {
-    transition: all 0.3s @ease-in-out;
-
-    .@{iconfont-css-prefix} {
-      padding-right: @padding-xs;
-      animation: none;
-      // for smooth button padding transition
-      svg {
-        animation: loadingCircle 1s infinite linear;
-      }
+  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
+    padding-left: 29px;
+    .@{iconfont-css-prefix}:not(:last-child) {
+      margin-left: -14px;
     }
+  }
 
-    &:only-child {
-      .@{iconfont-css-prefix} {
-        padding-right: 0;
-      }
+  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
+    padding-left: 24px;
+    .@{iconfont-css-prefix} {
+      margin-left: -17px;
     }
   }
 
+  // & > &-loading-icon {
+  //   transition: all 0.3s @ease-in-out;
+
+  //   .@{iconfont-css-prefix} {
+  //     padding-right: @padding-xs;
+  //     animation: none;
+  //     // for smooth button padding transition
+  //     svg {
+  //       animation: loadingCircle 1s infinite linear;
+  //     }
+  //   }
+
+  //   &:only-child {
+  //     .@{iconfont-css-prefix} {
+  //       padding-right: 0;
+  //     }
+  //   }
+  // }
+
   &-group {
     .btn-group(@btn-prefix-cls);
   }