feat(table): add loading state (#259)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/4.data/1.table.md

@@ -401,11 +401,60 @@ const rows = computed(() => {
 ```
 ::
 
+### Loading :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `loading` prop to display a loading state.
+
+Use the `loading-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.loadingState`.
+
+You can also set it to `null` to hide the loading state.
+
+::component-card
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  loading: true
+  loadingState:
+    icon: 'i-heroicons-arrow-path-20-solid'
+    label: "Loading..."
+excludedProps:
+  - loadingState
+---
+::
+
+This can be easily used with Nuxt `useAsyncData` composable.
+
+```vue
+<script setup>
+const columns = [...]
+
+const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending" />
+</template>
+```
+
 ### Empty
 
-Use the `empty-state` prop to display a message when there are no results.
+An empty state will be displayed when there are no results.
 
-You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
+Use the `empty-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.emptyState`.
 
 You can also set it to `null` to hide the empty state.
 
@@ -517,7 +566,46 @@ const selected = ref([people[1]])
 ```
 ::
 
-### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom"}
+### `loading-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `#loading-state` slot to customize the loading state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-loading-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [...]
+
+const people = []
+
+const pending = ref(true)
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending">
+    <template #loading-state>
+      <div class="flex items-center justify-center h-32">
+        <i class="loader --6" />
+      </div>
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+/* https://codepen.io/jenning/pen/YzNmzaV */
+</style>
+```
+::
+
+### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
 
 Use the `#empty-state` slot to customize the empty state.