From 96fe977d1b19968720e3f4aff989c0021e6ff691 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 3 Sep 2020 21:10:28 +0800
Subject: [PATCH] perf(Loading): reduce vnode cost

---
 src/loading/index.js | 42 ++++++++++++++++--------------------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/loading/index.js b/src/loading/index.js
index bbfa0cf9a..31d2bf4b3 100644
--- a/src/loading/index.js
+++ b/src/loading/index.js
@@ -1,8 +1,19 @@
 import { computed } from 'vue';
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, getSizeStyle } from '../utils';
 
 const [createComponent, bem] = createNamespace('loading');
 
+const SpinIcon = [];
+for (let i = 0; i < 12; i++) {
+  SpinIcon.push(<i />);
+}
+
+const CircularIcon = (
+  <svg class={bem('circular')} viewBox="25 25 50 50">
+    <circle cx="50" cy="50" r="20" fill="none" />
+  </svg>
+);
+
 export default createComponent({
   props: {
     size: [Number, String],
@@ -16,17 +27,6 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const SpinIcon = [];
-    for (let i = 0; i < 12; i++) {
-      SpinIcon.push(<i />);
-    }
-
-    const CircularIcon = (
-      <svg class={bem('circular')} viewBox="25 25 50 50">
-        <circle cx="50" cy="50" r="20" fill="none" />
-      </svg>
-    );
-
     const renderText = () => {
       if (slots.default) {
         return (
@@ -42,23 +42,13 @@ export default createComponent({
       }
     };
 
-    const spinnerStyle = computed(() => {
-      const style = {
-        color: props.color,
-      };
-
-      if (props.size) {
-        const size = addUnit(props.size);
-        style.width = size;
-        style.height = size;
-      }
-
-      return style;
-    });
+    const spinnerStyle = computed(() => ({
+      color: props.color,
+      ...getSizeStyle(props.size),
+    }));
 
     return () => {
       const { type, vertical } = props;
-
       return (
         <div class={bem([type, { vertical }])}>
           <span class={bem('spinner', type)} style={spinnerStyle.value}>