fix(VField): make loader visible

[yuwu9145]

fixes #18146

Approach in v2:

Description

Markup:

<template>
  <v-app>
    <v-container>
      <v-autocomplete
        v-model:search.trim="modelSearch"
        placeholder="good"
        :loading="loading"
        hide-no-data
      />
      <v-autocomplete
        v-model:search.trim="modelSearch"
        placeholder="bad"
        :loading="true"
        hide-no-data
        variant="outlined"
      />
      <v-text-field
        v-model:search.trim="modelSearch"
        placeholder="bad"
        :loading="true"
        hide-no-data
        variant="outlined"
      />
      <v-autocomplete
        class="fixed"
        placeholder="fixed"
        v-model:search.trim="modelSearch"
        :loading="loading"
        hide-no-data
        variant="outlined"
      />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, watch } from 'vue'

  const model = ref()

  const modelSearch = ref('')
  const loading = ref(false)
  const items = ref([])

  watch(modelSearch, async () => {
    loading.value = true
    await new Promise(resolve => setTimeout(resolve, 2000))
    loading.value = false
  })
</script>
<style>
  .fixed .v-field--variant-outlined.v-field--focused .v-field__loader {
    z-index: 1;
  }
  .fixed
    .v-field--variant-outlined.v-field--focused
    .v-field__loader
    .v-progress-linear__indeterminate {
    background-color: rgb(var(--v-theme-on-primary), 0.75) !important;
  }
</style>

[johnleider]

I made 2 tweaks. The loader is 2px in height so it needs to move further top by 1px. I also opted for overflow: hidden because with higher border radiuses, the loader looks terrible:

vs

[yuwu9145]

It still has issue of loading bar is hidden when outlined variant is focused. So:

• The loader should be moved down by 1px in order to be always 1px visible outside
• For higher border radiuses, $field-control-outlined-start-width could be used to prevent loader bar extends to radius area

@johnleider if you think this is the right approach, I'm happy to make it happen during next commit

[KaelWD]

You can just make it thicker or shift it up another px when focused.