feat: add loading icon

components/button/button.tsx

@@ -21,6 +21,7 @@ import {
   isUnBorderedButtonType,
   spaceChildren
 } from './button-helper'
+import LoadingIcon from './loading-icon'
 type Loading = number | boolean
 
 function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
@@ -183,7 +184,17 @@ const Button = defineComponent({
         compactItemClassnames.value,
         rootClassName
       )
-      const iconNode = icon && (!innerLoading.value ? icon?.() : <>L</>)
+      const iconNode =
+        icon &&
+        (!innerLoading.value ? (
+          icon?.()
+        ) : (
+          <LoadingIcon
+            existIcon={!!icon}
+            prefixCls={prefixCls.value}
+            loading={!!innerLoading.value}
+          />
+        ))
 
       const kids =
         children || children === 0

components/button/loading-icon.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { Transition, defineComponent, nextTick } from 'vue'
 import { booleanType, someType, stringType } from '@v-c/utils'
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
 
@@ -13,25 +13,33 @@ export const loadingIconProps = {
   loading: someType<boolean | object>([Boolean, Object])
 }
 
-// const getCollapsedWidth = (): CSSProperties => ({
-//   width: 0,
-//   opacity: 0,
-//   transform: 'scale(0)'
-// })
-//
-// const getRealWidth = (node: HTMLElement): CSSProperties => ({
-//   width: node.scrollWidth,
-//   opacity: 1,
-//   transform: 'scale(1)'
-// })
+const getCollapsedWidth = (el: Element) => {
+  const node: HTMLElement = el as HTMLElement
+  if (node) {
+    node.style.width = '0'
+    node.style.opacity = '0'
+    node.style.transform = 'scale(0)'
+  }
+}
+
+const getRealWidth = (el: Element) => {
+  const node: HTMLElement = el as HTMLElement
+  nextTick(() => {
+    if (node) {
+      node.style.width = `${node.scrollWidth}px`
+      node.style.opacity = '1'
+      node.style.transform = 'scale(1)'
+    }
+  }).then()
+}
 
 const LoadingIcon = defineComponent({
   name: 'LoadingIcon',
   props: loadingIconProps,
   setup(props) {
     return () => {
-      const { existIcon, prefixCls } = props
-      // const visible = !!loading
+      const { loading, existIcon, prefixCls } = props
+      const visible = !!loading
       if (existIcon) {
         return (
           <span class={`${prefixCls}-loading-icon`}>
@@ -39,6 +47,19 @@ const LoadingIcon = defineComponent({
           </span>
         )
       }
+      return (
+        <Transition
+          name={`${prefixCls}-loading-icon-motion`}
+          onBeforeEnter={getCollapsedWidth}
+          onEnter={getRealWidth}
+        >
+          {visible ? (
+            <span class={`${prefixCls}-loading-icon`}>
+              <LoadingOutlined />
+            </span>
+          ) : null}
+        </Transition>
+      )
     }
   }
 })