#loader slot renders alongside suggestions instead of replacing them when loading is true

[medaminebejaoui]

Description:
When using the #loader slot with :loading="true", the skeleton/loader content renders in addition to the suggestions list rather than replacing it. This makes the #loader slot unusable as a loading state indicator without extra workarounds.

Steps to reproduce:

Add a #loader slot to AutoComplete
Bind :loading="true"
Open the dropdown

Expected behavior:
The #loader slot content should replace the suggestions list while loading is true, similar to how #empty replaces the list when there are no suggestions.

Actual behavior:
The #loader slot content renders below the suggestions list, both visible at the same time.

Code

<PrimeAutoComplete
    ref="autocomplete"
    v-model="summaryInput"
    :suggestions="props.options"
    :placeholder="props.placeholder"
    option-label="title"
    :scroll-height="'auto'"
    v-bind="$attrs"
    class="w-full"
    :focus-on-hover="false"
    :complete-on-focus="true"
    append-to="self"
    :pt="{
      root: ({ state }) => ['autocomplete', { 'autocomplete-filled': state.overlayVisible }],
    }"
    @hide="$emit('hide', $event)"
    @change="$emit('summaryInput', $event.value)"
    @option-select="onSelect"
  >
    <!-- Options -->
    <template #option="slotProps">
      <RouterLink
        :key="slotProps.option.id"
        class="block py-16 group border-t"
        :to="slotProps.option.url"
        @click.stop
      >
        <p class="d3 mb-8 group-hover:underline">
          {{ slotProps.option.title }}
        </p>
        <p class="flex items-center gap-8 ui2 text-main-terciary">
          {{ slotProps.option.tag }} <span class="w-4 h-4 bg-main-terciary rounded-full" /> {{ slotProps.option.date }}
        </p>
      </RouterLink>
    </template>
    <!-- Loader -->
    <template #loader>
      <div class="autocomplete-loader relative bg-white p-16 -mt-12 rounded-b-8 border border-t-0 border-main-border transition-all">
        <div class="pt-16 border-t">
          <PrimeSkeleton width="70%" height="2.6rem" class="mb-16 rounded-4" />
          <PrimeSkeleton width="26rem" height="1.6rem" class="rounded-4" />
        </div>
      </div>
    </template>
    <!-- Empty -->
    <template #empty>
      <p class="pt-16 border-t">
        {{ "Aucun résultat trouvé" }}
      </p>
    </template>
  </PrimeAutoComplete>