feat(InputMenu/SelectMenu): don't show ComboboxEmpty when loading is true

[yooouuri]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Screen.Recording.2026-01-27.at.12.19.32.mov

Currently, when there is no data but being fetched and you open the InputMenu for example the ComboboxEmpty displays and then after the data is displayed.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change adds loading state handling to input menu and select menu components. Two example files bind the loading prop to their fetch status when pending. The core InputMenu and SelectMenu components are updated to conditionally hide their empty state during loading by adding v-if="!props.loading" guards to the ComboboxEmpty element.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: preventing ComboboxEmpty display when loading is true, which matches the core modifications in InputMenu and SelectMenu components.
Description check	✅ Passed	The description is related to the changeset, explaining the problem being solved (ComboboxEmpty displaying during loading) and noting that documentation was updated.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5956

commit: d0a7a4c

[benjamincanac]

Would you mind sharing the code to reproduce this use-case?

[yooouuri]

@benjamincanac

A little bit of context:

We have many SelectMenu/InputMenu's on our pages, but we only want to fetch data when they are openend.

<script setup lang="ts">
const { data: users, status, execute } = await useAsyncData(
  async () => {
    await new Promise(resolve => setTimeout(resolve, 1000))

    return $fetch('https://jsonplaceholder.typicode.com/users')
  },
  {
    immediate: false,
    transform: (data: any) => {
      return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } }))
    },
    lazy: true
  }
)

const open = ref(false)

watch(open, (value) => {
  if (value) {
    execute()
  }
})
</script>

<template>
  <USelectMenu v-model:open="open" :items="users" class="w-48" :loading="status === 'pending'" placeholder="Select user" />
</template>

With this MR:

Screen.Recording.2026-01-28.at.10.39.27.mov

And without

Screen.Recording.2026-01-28.at.10.40.41.mov

Maybe even disable the search, when there are no items and loading is true?

[benjamincanac]

I'm not sure removing the ComboboxEmpty on loading is the right way, this solution displays a double border which doesn't look nice. How about using the empty slot to display a loader instead?

<script setup lang="ts">
const { data: users, status, execute } = await useAsyncData(
  async () => {
    await new Promise(resolve => setTimeout(resolve, 1000))

    return $fetch('https://jsonplaceholder.typicode.com/users')
  },
  {
    immediate: false,
    transform: (data: any) => {
      return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } }))
    },
    lazy: true
  }
)

const open = ref(false)

watch(open, (value) => {
  if (value) {
    execute()
  }
})
</script>

<template>
  <USelectMenu
    v-model:open="open"
    :items="users"
    class="w-48"
    placeholder="Select user"
    :ui="{ empty: 'flex justify-center' }"
  >
    <template #empty>
      <UIcon v-if="status === 'pending'" name="i-lucide-loader-circle" class="animate-spin size-5" />
    </template>
  </USelectMenu>
</template>