Proposal to add a loading component

For what version of Nuxt UI are you suggesting this?

v3.0.0-alpha.x

Description

In certain situations, it’s necessary to display a loading indicator, but not all components currently include this feature. It would be helpful to have a composable and directive for such cases.

How it should work

A semi-transparent overlay should be rendered over the target, containing a loading icon.

How to use

Composable useLoading

<script setup lang="ts">
const layout = ref<HTMLDivElement | null>(null)
const { start, stop } = useLoading(layout)

function startLoading() {
  start()
  setTimeout(stop, 2000)
}
</script>

<template>
  <div ref="layout">
    ...
  </div>
  <UButton @click="startLoading">Show loading</UButton>
</template>

Directive v-loading

<script setup lang="ts">
const isLoading = ref(false)
</script>

<template>
  <div v-loading="isLoading">
    ...
  </div>
</template>

Additional context

Here’s how it’s implemented in other libraries:

• Element Plus - Loading
• Vue Loading

No repository files or tests are named in the issue. Start by reviewing the existing Nuxt UI component and composable patterns, then compare the referenced Element Plus and Vue Loading implementations. Done means a reusable loading overlay with an icon is available through both the proposed useLoading composable and v-loading directive.