Inner loading or other progress for select populated via vuex ajax

[genyded]

Has anyone come up with a way to show inner loading (or some other progress indicator) for a QSelect with options populated via an ajax call on page load? We tried:

<q-field>
  <q-select
    v-show="!visible"
    float-label="Country"
    @input="setCurrentCountry"
    :value="$store.state.app.currentCountry"
    :options="countries.map(country => (
       {label: country.name, value: country.id}
    ))"
  >
</q-select>
<q-inner-loading :visible="visible">
  <q-spinner-dots size="25px" color="primary"></q-spinner-dots>
  </q-inner-loading>
</q-field>

…and this generally works, but the loader is HUGE and overlaps the next input or whatever is after the select. Ideally we’d like the select display with dots or some other loader inside it until the options data arrives. However just displaying a loader in place of the select control until the data arrives will work as well, however it needs to be sized to the control. Any thoughts?

[ouaR]

Did you try to add “relative-position” class to <q-field> ?

[genyded]

With that class, the loader is not visible on the page at all.