UEmpty: add loading state / loading prop

[stijns96]

Feature request

Problem

When fetching async data, there's no built-in way to show a loading state that matches the UEmpty component's visual style. The typical pattern is to either:

• Show nothing while pending (causes layout shifts)
• Show the empty state immediately (causes a flash before data arrives)
• Roll a custom spinner that doesn't match the component system

Proposed solution

Two complementary approaches would solve this:

1. A loading prop on UEmpty

<UEmpty
  icon="i-lucide-message-circle"
  title="Nog geen berichten"
  description="Wees de eerste om iets te zeggen!"
  :loading="status === 'pending'"
/>

When loading is true, the component could replace (or animate) the icon with a spinner and optionally swap the title/description for a loading message.

2. A dedicated ULoading (or USkeleton variant) component

A standalone empty-state-style loading component with the same layout/spacing as UEmpty, so you can toggle between them without layout shifts:

<ULoading v-if="status === 'pending'" />
<UEmpty v-else-if="!items?.length" ... />

Current workaround

<div v-if="status === 'pending'" class="h-full content-center">
  <div class="flex justify-center">
    <UIcon name="i-lucide-loader-circle" class="text-muted size-6 animate-spin" />
  </div>
</div>
<UEmpty v-else-if="!items?.length" ... />

This works but requires manual layout matching and breaks the component abstraction.

Alternatives considered

• Using USkeleton directly — doesn't match the centered empty-state layout
• Wrapping in a custom component — adds boilerplate every time this pattern is needed

[Dtem4ik]

I'd like to work on this. Before opening a PR — a scoping proposal:

The loading prop feels like the right first step, and there's already a canonical pattern for it in the system: UButton's loading + loadingIcon (defaulting to appConfig.ui.icons.loading, spinning via the theme). Applying the same pattern to UEmpty would mean:

• loading?: boolean — swaps the avatar icon for the loading icon with a spin animation, keeping the exact same layout (no shifts when toggling with data/empty states)
• loadingIcon?: string — same default and override story as Button
• aria-busy="true" on the root while loading

<UEmpty
  icon="i-lucide-inbox"
  title="No messages yet"
  :loading="status === 'pending'"
/>

A standalone ULoading component is a bigger API-surface decision, so I'd leave that part for the maintainers to weigh in on separately.

@benjamincanac does this direction work for you? Happy to open a PR with theme, tests and docs.

[benjamincanac]

@Dtem4ik Adding a loading and loadingIcon props to UEmpty is fine by me 😊