feat(ComboBoxSimple): indicate pending search

src/components/ComboBoxSimple.vue

@@ -4,6 +4,7 @@
     v-bind="comboBoxProps"
     :choices="filteredChoices"
     :close-on-select="props.closeOnSelect ?? !Array.isArray(modelValue)"
+    :is-loading="isLoading"
     :input-container-class="[
       'tw-flex tw-flex-wrap tw-p-2 tw-gap-2 tw-items-baseline tw-w-full form-control tw-h-auto tw-min-h-[46px]',
       disabled && 'hocus:tw-shadow-none focus:tw-shadow-none tw-border-gray-300 tw-bg-gray-200',
@@ -56,7 +57,7 @@ export type ComboBoxSimpleProps<T> = Omit<ComboBoxProps<T>, 'choices'> & {
 <script setup lang="ts" generic="T extends { id: ID; name?: string }">
 import { ID } from '@rokoli/bnb/drf'
 import { computedAsync } from '@vueuse/core'
-import { computed, toValue } from 'vue'
+import { computed, ref, toValue } from 'vue'
 import { computedDebounced, matchesSearch } from '@/util'
 import Tag from './generic/Tag.vue'
 import ComboBox from './ComboBox.vue'
@@ -85,6 +86,7 @@ const comboBoxProps = computed(() => {
   return rest
 })
 
+const isLoading = ref(false)
 const debouncedSearchQuery = computedDebounced(searchQuery, (t) => (t.trim() ? 0.3 : 0))
 const selectedIds = computed(() => {
   if (Array.isArray(modelValue.value)) {
@@ -116,7 +118,7 @@ const searchedChoices = computedAsync(
     }
   },
   props.choices ?? [],
-  { lazy: false },
+  { lazy: false, evaluating: isLoading },
 )
 const filteredChoices = computed(() =>
   searchedChoices.value.filter((choice) => !selectedIds.value.includes(choice.id)),