feat(loading): refactor finish logic (#725)

Now eaah finish needs a start.

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - `n-scrollbar` add `scrollbarWidth`, `scrollbarHeight` and `scrollbarBorderRadius` common theme variables, closes [#649](https://github.com/TuSimple/naive-ui/issues/649).
 - `n-menu` doesn't should icon placeholder when `render-icon` returns falsy value, closes [#722](https://github.com/TuSimple/naive-ui/issues/722).
+- Cancel `n-loading-bar` components `finish`'s logic that the default event.
 
 ## 2.15.11 (2021-07-29)
 

CHANGELOG.zh-CN.md

@@ -6,7 +6,7 @@
 
 - `n-scrollbar` 增加 `scrollbarWidth`、`scrollbarHeight` 和　`scrollbarBorderRadius`　公共主题变量，关闭 [#649](https://github.com/TuSimple/naive-ui/issues/649)
 - `n-menu` 在 `render-icon` 返回 falsy 值的时候不渲染 icon 的占位符，关闭 [#722](https://github.com/TuSimple/naive-ui/issues/722)
-
+- 取消 `n-loading-bar` 中 `finish` 方法的兜底逻辑
 ## 2.15.11 (2021-07-29)
 
 ### Fixes

src/loading-bar/demos/enUS/basic.demo.md

@@ -3,28 +3,36 @@
 ```html
 <n-space>
   <n-button @click="handleStart"> start </n-button>
-  <n-button @click="handleFinish"> finish </n-button>
+  <n-button @click="handleFinish" :disabled="disabled"> finish </n-button>
   <n-button @click="handleError"> error </n-button>
 </n-space>
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { useLoadingBar } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const loadingBar = useLoadingBar()
+    const disabledRef = ref(true)
+    function handleStart () {
+      loadingBar.start()
+      disabledRef.value = false
+    }
+    function handleFinish () {
+      loadingBar.finish()
+      disabledRef.value = true
+    }
+    function handleError () {
+      loadingBar.error()
+    }
     return {
-      handleStart () {
-        loadingBar.start()
-      },
-      handleFinish () {
-        loadingBar.finish()
-      },
-      handleError () {
-        loadingBar.error()
-      }
+      disabled: disabledRef,
+      handleStart,
+      handleFinish,
+      handleError
     }
   }
-}
+})
 ```

src/loading-bar/demos/zhCN/basic.demo.md

@@ -3,28 +3,36 @@
 ```html
 <n-space>
   <n-button @click="handleStart"> 开始 </n-button>
-  <n-button @click="handleFinish"> 结束 </n-button>
+  <n-button @click="handleFinish" :disabled="disabled"> 结束 </n-button>
   <n-button @click="handleError"> 报个错 </n-button>
 </n-space>
 ```
 
 ```js
+import { defineComponent, ref } from 'vue'
 import { useLoadingBar } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const loadingBar = useLoadingBar()
+    const disabledRef = ref(true)
+    function handleStart () {
+      loadingBar.start()
+      disabledRef.value = false
+    }
+    function handleFinish () {
+      loadingBar.finish()
+      disabledRef.value = true
+    }
+    function handleError () {
+      loadingBar.error()
+    }
     return {
-      handleStart () {
-        loadingBar.start()
-      },
-      handleFinish () {
-        loadingBar.finish()
-      },
-      handleError () {
-        loadingBar.error()
-      }
+      disabled: disabledRef,
+      handleStart,
+      handleFinish,
+      handleError
     }
   }
-}
+})
 ```

src/loading-bar/src/LoadingBar.tsx

@@ -64,24 +64,13 @@ export default defineComponent({
     }
     function finish (): void {
       if (finishing || erroring) return
-      if (!loadingRef.value) {
-        void start(100, 100).then(() => {
-          finishing = true
-          const el = loadingBarRef.value
-          if (!el) return
-          el.className = createClassName('finishing', mergedClsPrefixRef.value)
-          void el.offsetWidth
-          loadingRef.value = false
-        })
-      } else {
-        finishing = true
-        const el = loadingBarRef.value
-        if (!el) return
-        el.className = createClassName('finishing', mergedClsPrefixRef.value)
-        el.style.maxWidth = '100%'
-        void el.offsetWidth
-        loadingRef.value = false
-      }
+      finishing = true
+      const el = loadingBarRef.value
+      if (!el) return
+      el.className = createClassName('finishing', mergedClsPrefixRef.value)
+      el.style.maxWidth = '100%'
+      void el.offsetWidth
+      loadingRef.value = false
     }
     function error (): void {
       if (finishing || erroring) return