feat(Table): add loading slot

Resolves #3444

src/runtime/components/Table.vue

@@ -161,6 +161,7 @@ type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, un
 export type TableSlots<T> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
+  loading: (props?: {}) => any
   caption: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
@@ -175,7 +176,7 @@ import { reactiveOmit } from '@vueuse/core'
 import { useLocale } from '../composables/useLocale'
 
 const props = defineProps<TableProps<T>>()
-defineSlots<TableSlots<T>>()
+const slots = defineSlots<TableSlots<T>>()
 
 const { t } = useLocale()
 
@@ -359,7 +360,13 @@ defineExpose({
           </template>
         </template>
 
-        <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
+        <tr v-else-if="loading && !!slots['loading']">
+          <td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
+            <slot name="loading" />
+          </td>
+        </tr>
+
+        <tr v-else>
           <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ t('table.noData') }}

src/theme/table.ts

@@ -10,7 +10,8 @@ export default (options: Required<ModuleOptions>) => ({
     tr: 'data-[selected=true]:bg-(--ui-bg-elevated)/50',
     th: 'px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
     td: 'p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0',
-    empty: 'py-6 text-center text-sm text-(--ui-text-muted)'
+    empty: 'py-6 text-center text-sm text-(--ui-text-muted)',
+    loading: 'py-6 text-center'
   },
   variants: {
     pinned: {