Fixed #4886 - Tree / TreeTable: new loadingMode property

components/lib/tree/BaseTree.vue

@@ -34,6 +34,10 @@ export default {
             type: String,
             default: undefined
         },
+        loadingMode: {
+            type: String,
+            default: 'mask'
+        },
         filter: {
             type: Boolean,
             default: false

components/lib/tree/Tree.d.ts

@@ -232,6 +232,11 @@ export interface TreeProps {
      * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
+    /**
+     * Loading mode display.
+     * @defaultValue mask
+     */
+    loadingMode?: 'mask' | 'icon' | undefined;
     /**
      * When specified, displays an input field to filter the items.
      * @defaultValue false

components/lib/tree/Tree.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tree">
-        <template v-if="loading">
+        <template v-if="loading && loadingMode === 'mask'">
             <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
                 <slot name="loadingicon" :class="cx('loadingIcon')">
                     <i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
@@ -29,6 +29,7 @@
                     :selectionMode="selectionMode"
                     :selectionKeys="selectionKeys"
                     @checkbox-change="onCheckboxChange"
+                    :loadingMode="loadingMode"
                     :pt="pt"
                     :unstyled="unstyled"
                 ></TreeNode>

components/lib/tree/TreeNode.vue

@@ -16,9 +16,15 @@
     >
         <div :class="cx('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
             <button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
-                <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
-                <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
-                <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
+                <template v-if="node.loading && loadingMode === 'icon'">
+                    <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
+                    <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
+                </template>
+                <template v-else>
+                    <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
+                    <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
+                    <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
+                </template>
             </button>
             <div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
                 <div :class="cx('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')" :data-p-checked="checked" :data-p-partialchecked="partialChecked">
@@ -57,6 +63,7 @@ import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import MinusIcon from 'primevue/icons/minus';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
 
@@ -74,6 +81,10 @@ export default {
             type: null,
             default: null
         },
+        loadingMode: {
+            type: String,
+            default: 'mask'
+        },
         selectionKeys: {
             type: null,
             default: null
@@ -90,10 +101,7 @@ export default {
             type: Number,
             default: null
         },
-        index: {
-            type: Number,
-            default: null
-        }
+        index: null
     },
     nodeTouched: false,
     toggleClicked: false,
@@ -435,7 +443,8 @@ export default {
         ChevronDownIcon: ChevronDownIcon,
         ChevronRightIcon: ChevronRightIcon,
         CheckIcon: CheckIcon,
-        MinusIcon: MinusIcon
+        MinusIcon: MinusIcon,
+        SpinnerIcon: SpinnerIcon
     },
     directives: {
         ripple: Ripple

components/lib/tree/style/TreeStyle.js

@@ -113,6 +113,7 @@ const classes = {
     ],
     toggler: 'p-tree-toggler p-link',
     togglerIcon: 'p-tree-toggler-icon',
+    nodeTogglerIcon: 'p-tree-node-toggler-icon',
     checkboxContainer: 'p-checkbox p-component',
     checkbox: ({ instance }) => [
         'p-checkbox-box',