VaSelect when dealing with large data sets

[Bond-Addict]

I have a component that is using a select which contains a list of employees that you can assign something to. I have a total of 468 employees which come back from my api. I know this will cause the dropdown to hang, but that would be fine as long as the user knows that something happened when they clicked on the dropdown.

Is there a way to set isloading to true on click but then set it to false once isOpen is true?

I figured I could create a ref for isOpen and isLoading and then when you click on the select isLoading is set to true and I would assume that isOpen should be come true once its open which I would watch and then set isLoading to false once isOpen is true.

I havent been able to get this approach to work yet. Any advice?

TIA!

[m0ksem]

First of all I'd recommend using virtual-scroller prop for large amount of options.

Then, answering your question, you can use @update:isOpen event.

<va-value #default="v">
  <va-select :loading="v.value" @click="v.value = true" @update:isOpen="v.value = !$event" />
</va-value>

[Bond-Addict]

@m0ksem thats definitely better. The spinner doesn't seem to turn on when you click on the select and only shows when you close the select by clicking the select again.

This is my current code

      <va-value #default="v">
        <va-select :options="employees" :valueBy="(option: Client) => option.employeeId"
          :textBy="(option: Client) => option.employeeName`" v-model="clientPosition.employeeId"
          label="Employee" :disabled="actionType !== ActionType.Add" searchable highlight-matched-text :loading="v.value"
          @click="v.value = true" @update:isOpen="v.value = !$event" :virtualScroller="true"></va-select>
      </va-value>