Proposal to add a loading component

[hywax]

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