feat(tree): on-load prop allows returned promise to resolve false to finish loading effect, closes #4038

CHANGELOG.en-US.md

@@ -14,6 +14,7 @@
 - `n-form` adds `labelFontWeight` theme variable, closes [#3516](https://github.com/tusen-ai/naive-ui/issues/3516).
 - `n-radio` adds `labelFontWeight` theme variable, closes [#3516](https://github.com/tusen-ai/naive-ui/issues/3516).
 - `n-checkbox` adds `labelFontWeight` theme variable, closes [#3516](https://github.com/tusen-ai/naive-ui/issues/3516).
+- `n-tree`'s `on-load` prop allows returned promise to resolve `false` to finish loading effect, closes [#4038](https://github.com/tusen-ai/naive-ui/issues/4038).
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -14,6 +14,7 @@
 - `n-form` 新增 `labelFontWeight` 主题变量，关闭 [#3516](https://github.com/tusen-ai/naive-ui/issues/3516)
 - `n-radio` 新增 `labelFontWeight` 主题变量，关闭 [#3516](https://github.com/tusen-ai/naive-ui/issues/3516)
 - `n-checkbox` 新增 `labelFontWeight` 主题变量，关闭 [#3516](https://github.com/tusen-ai/naive-ui/issues/3516)
+- `n-tree` 的 `on-load` 属性支持返回值 resolve false 来关闭加载动画，关闭 [#4038](https://github.com/tusen-ai/naive-ui/issues/4038)
 
 ### Fixes
 

src/tree/demos/enUS/index.demo-entry.md

@@ -61,7 +61,7 @@ checkbox-placement.vue
 | disabled-field | `string` | `'disabled'` | The disabled field in `TreeOption`. | 2.32.2 |
 | node-props | `(info: { option: TreeOption }) => HTMLAttributes` | `undefined` | HTML attributes of node. | 2.25.0 |
 | multiple | `boolean` | `false` | Whether to allow multiple selection of nodes. |  |
-| on-load | `(node: TreeOption) => Promise<void>` | `undefined` | Callback function for asynchronously loading data. |  |
+| on-load | `(node: TreeOption) => Promise<void>` | `undefined` | Callback function for asynchronously loading data. If not data is loaded, you should make promise resolve `false` or be rejected, nor the loading animation won't end. | Non void Promise NEXT_VERSION |
 | pattern | `string` | `''` | What to search by default. |  |
 | render-label | `(info: { option: TreeOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | Render function of all the options' label. |  |
 | render-prefix | `(info: { option: TreeOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | Render function of all the options' prefix. |  |

src/tree/demos/zhCN/index.demo-entry.md

@@ -67,7 +67,7 @@ expand-debug.vue
 | disabled-field | `string` | `'disabled'` | 替代 `TreeOption` 中的 disabled 字段名 | 2.32.2 |
 | node-props | `(info: { option: TreeOption }) => HTMLAttributes` | `undefined` | 节点的 HTML 属性 | 2.25.0 |
 | multiple | `boolean` | `false` | 是否允许节点多选 |  |
-| on-load | `(node: TreeOption) => Promise<void>` | `undefined` | 异步加载数据的回调函数 |  |
+| on-load | `(node: TreeOption) => Promise<unknown>` | `undefined` | 异步加载数据的回调函数，如果没有加载到数据你应该让 Promise resolve `false` 或者 reject 这个 Promise，否则加载动画不会停止 | 非 void Promise NEXT_VERSION |
 | pattern | `string` | `''` | 默认搜索的内容 |  |
 | render-label | `(info: { option: TreeOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | 节点内容的渲染函数 |  |
 | render-prefix | `(info: { option: TreeOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | 节点前缀的渲染函数 |  |

src/tree/src/Tree.tsx

@@ -64,7 +64,8 @@ import type {
   TreeNodeProps,
   CheckOnClick,
   TreeInst,
-  GetChildren
+  GetChildren,
+  OnLoad
 } from './interface'
 import { treeInjectionKey } from './interface'
 import MotionWrapper from './MotionWrapper'
@@ -168,7 +169,6 @@ export type OnUpdateExpandedKeysImpl = (
     action: 'filter'
   }
 ) => void
-type OnLoad = (node: TreeOption) => Promise<void>
 
 export const treeSharedProps = {
   allowCheckingNotLoaded: Boolean,

src/tree/src/TreeNode.tsx

@@ -88,8 +88,10 @@ const TreeNode = defineComponent({
         } = NTree
         if (onLoad) {
           void onLoad(tmNode.rawNode)
-            .then(() => {
-              NTree.handleSwitcherClick(tmNode)
+            .then((value) => {
+              if (value !== false) {
+                NTree.handleSwitcherClick(tmNode)
+              }
             })
             .finally(() => {
               NTree.loadingKeysRef.value.delete(tmNode.key)

src/tree/src/interface.ts

@@ -6,6 +6,8 @@ import type { TreeTheme } from '../styles'
 
 export type Key = string | number
 
+export type OnLoad = (node: TreeOption) => Promise<unknown>
+
 export interface TreeOptionBase {
   key?: Key
   label?: string
@@ -91,7 +93,7 @@ export interface TreeInjection {
   fNodesRef: Ref<Array<TreeNode<TreeOption>>>
   draggableRef: Ref<boolean>
   mergedThemeRef: Ref<MergedTheme<TreeTheme>>
-  onLoadRef: Ref<((node: TreeOption) => Promise<void>) | undefined>
+  onLoadRef: Ref<OnLoad | undefined>
   blockLineRef: Ref<boolean>
   indentRef: Ref<number>
   draggingNodeRef: Ref<TmNode | null>