feat(xo6): add loader on input search treeview when is triggered

@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue

@@ -12,6 +12,7 @@
         choice({ label: 'Search', value: 'fa:magnifying-glass' }, { label: 'AngleDown', value: 'fa:angle-down' })
       ),
       prop('clearable').bool().widget(),
+      prop('isSearching').bool().widget(),
       prop('disabled').bool().widget().help('Not defined as component prop'),
       slot('rightIcon').help('Can be used in place of rightIcon prop'),
     ]"

@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue

@@ -1,7 +1,8 @@
 <!-- v5 -->
 <template>
   <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
-    <VtsIcon :name="icon" size="medium" class="left-icon" />
+    <UiLoader v-if="isSearching" />
+    <VtsIcon v-else :name="icon" size="medium" class="left-icon" />
     <input
       :id="wrapperController?.id ?? id"
       ref="inputRef"
@@ -30,6 +31,7 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
@@ -57,6 +59,7 @@ const {
   icon?: IconName
   rightIcon?: IconName
   clearable?: boolean
+  isSearching?: boolean
 }>()
 
 const modelValue = defineModel<string | number>({ required: true })

@xen-orchestra/web-core/lib/composables/tree-filter.composable.ts

@@ -6,9 +6,10 @@ export function useTreeFilter() {
   const filter = ref('')
   const debouncedFilter = refDebounced(filter, 500)
   const hasFilter = computed(() => debouncedFilter.value.trim().length > 0)
+  const isSearching = computed(() => filter.value !== debouncedFilter.value)
 
   const predicate = (node: TreeNodeBase) =>
     hasFilter.value ? node.label.toLocaleLowerCase().includes(debouncedFilter.value.toLocaleLowerCase()) : undefined
 
-  return { filter, predicate }
+  return { filter, predicate, isSearching }
 }

@xen-orchestra/web/src/components/SidebarSearch.vue

@@ -6,6 +6,8 @@
       icon="fa:magnifying-glass"
       :placeholder="t('sidebar.search-tree-view')"
       accent="brand"
+      clearable
+      :is-searching
     />
   </div>
 </template>
@@ -14,6 +16,8 @@
 import UiInput from '@core/components/ui/input/UiInput.vue'
 import { useI18n } from 'vue-i18n'
 
+defineProps<{ isSearching?: boolean }>()
+
 const search = defineModel<string>({ default: '' })
 
 const { t } = useI18n()

@xen-orchestra/web/src/composables/pool-tree.composable.ts

@@ -12,7 +12,7 @@ export function useSiteTree() {
   const { pools, arePoolsReady } = useXoPoolCollection()
   const { hostsByPool, areHostsReady } = useXoHostCollection()
   const { vmsByHost, hostLessVmsByPool, areVmsReady } = useXoVmCollection()
-  const { filter, predicate } = useTreeFilter()
+  const { filter, predicate, isSearching } = useTreeFilter()
 
   const site: XoSite = {
     id: useId(),
@@ -68,5 +68,6 @@ export function useSiteTree() {
     isReady,
     sites: nodes,
     filter,
+    isSearching,
   }
 }

@xen-orchestra/web/src/layouts/AppLayout.vue

@@ -19,7 +19,7 @@
       <AccountMenu />
     </template>
     <template #sidebar-header>
-      <SidebarSearch v-model="filter" />
+      <SidebarSearch v-model="filter" :is-searching />
     </template>
     <template #sidebar-content>
       <VtsTreeList v-if="!isReady">
@@ -55,7 +55,7 @@ defineSlots<{
 
 const uiStore = useUiStore()
 
-const { sites, isReady, filter } = useSiteTree()
+const { sites, isReady, filter, isSearching } = useSiteTree()
 </script>
 
 <style lang="postcss" scoped>

CHANGELOG.unreleased.md

@@ -71,6 +71,7 @@
 
 - **XO 6:**
   - [Collections] Implement virtual lists for tasks and alarms to improve performance (PR [#9077](https://github.com/vatesfr/xen-orchestra/pull/9077))
+  - [Treeview search] Add loader when search is triggered and ability to clear search (PR [#9122](https://github.com/vatesfr/xen-orchestra/pull/9122))
 
 ### Bug fixes