feat(docs): add docs for table loading state

docs/components/content/examples/TableExampleLoadingSlot.vue

@@ -0,0 +1,31 @@
+<script setup>
+const columns = [{
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}, {
+  key: 'actions'
+}]
+
+const people = []
+
+const isLoading = ref(true);
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :is-loading="isLoading">
+    <template #loading-state>
+      <div class="flex items-center justify-center">
+        <span class="py-10">Loading...</span>
+      </div>
+    </template>
+  </UTable>
+</template>

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

@@ -400,6 +400,59 @@ excludedProps:
 ---
 ::
 
+### Loading
+
+Use the `is-loading` prop to display a loading state. it's used for async data fetching.
+
+You can pass an `object` through the `loading-state` prop or globally through `ui.table.default.loadingState`.
+
+::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:
+  isLoading: true
+  loadingState:
+    icon: 'i-heroicons-arrow-path animate-spin'
+    label: "Loading..."
+excludedProps:
+  - isLoading
+  - loadingState
+---
+::
+
+#### Example with async data
+
+```vue
+<script setup>
+const columns = [...]
+const people = ref([...])
+const isLoading = ref(true)
+
+const getPeople = async () => {
+  // await fetch data from API and set people ...
+
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :is-loading="isLoading" />
+</template>
+```
 ## Slots
 
 You can use slots to customize the header and data cells of the table.
@@ -482,6 +535,39 @@ const selected = ref([people[1]])
 ```
 ::
 
+### `loading-state`
+
+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 = [...]
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :is-loading="isLoading">
+    <template #loading-state>
+      <div class="flex items-center justify-center">
+          <span class="py-10">Loading...</span>
+      </div>
+    </template>
+  </UTable>
+</template>
+```
+::
+
 ## Props
 
 :component-props