Refactor #6481- Tree lazy

packages/primevue/src/treeselect/BaseTreeSelect.vue

@@ -56,6 +56,18 @@ export default {
             type: Boolean,
             default: null
         },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: undefined
+        },
+        loadingMode: {
+            type: String,
+            default: 'mask'
+        },
         filter: {
             type: Boolean,
             default: false

packages/primevue/src/treeselect/TreeSelect.d.ts

@@ -230,6 +230,20 @@ export interface TreeSelectProps {
      * @defaultValue false
      */
     metaKeySelection?: boolean | undefined;
+    /**
+     * Whether to display loading indicator.
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Icon to display when tree is loading.
+     */
+    loadingIcon?: string | undefined;
+    /**
+     * Loading mode display.
+     * @defaultValue mask
+     */
+    loadingMode?: 'mask' | 'icon' | undefined;
     /**
      * When specified, displays an input field to filter the items.
      * @defaultValue false

packages/primevue/src/treeselect/TreeSelect.vue

@@ -49,7 +49,6 @@
                     <span
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
-                        aria-hidden="true"
                         class="p-hidden-accessible p-hidden-focusable"
                         :tabindex="0"
                         @focus="onFirstHiddenFocus"
@@ -64,6 +63,9 @@
                             :id="listId"
                             :value="options"
                             :selectionMode="selectionMode"
+                            :loading="loading"
+                            :loadingIcon="loadingIcon"
+                            :loadingMode="loadingMode"
                             :filter="filter"
                             :filterBy="filterBy"
                             :filterMode="filterMode"
@@ -93,7 +95,7 @@
                                 <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
                             </template>
                         </TSTree>
-                        <div v-if="emptyOptions" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
+                        <div v-if="emptyOptions && !loading" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>
                     </div>
@@ -101,7 +103,6 @@
                     <span
                         ref="lastHiddenFocusableElementOnOverlay"
                         role="presentation"
-                        aria-hidden="true"
                         class="p-hidden-accessible p-hidden-focusable"
                         :tabindex="0"
                         @focus="onLastHiddenFocus"

packages/primevue/src/treeselect/style/TreeSelectStyle.js

@@ -121,6 +121,10 @@ const theme = ({ dt }) => `
     padding: ${dt('treeselect.tree.padding')};
 }
 
+.p-treeselect-overlay .p-tree-loading {
+    min-height: 3rem;
+}
+
 .p-treeselect-label .p-chip {
     padding-top: calc(${dt('treeselect.padding.y')} / 2);
     padding-bottom: calc(${dt('treeselect.padding.y')} / 2);