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

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

src/runtime/app.config.ts

@@ -24,6 +24,11 @@ const table = {
     font: '',
     size: 'text-sm'
   },
+  loadingState: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
+    label: 'text-sm text-center text-gray-900 dark:text-white',
+    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4 animate-spin'
+  },
   emptyState: {
     wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
     label: 'text-sm text-center text-gray-900 dark:text-white',
@@ -40,6 +45,10 @@ const table = {
       variant: 'ghost',
       class: '-m-1.5'
     },
+    loadingState: {
+      icon: 'i-heroicons-arrow-path-20-solid',
+      label: 'Loading...'
+    },
     emptyState: {
       icon: 'i-heroicons-circle-stack-20-solid',
       label: 'No items.'

src/runtime/components/data/Table.vue

@@ -34,7 +34,20 @@
           </td>
         </tr>
 
-        <tr v-if="emptyState && !rows.length">
+        <tr v-if="loadingState && loading">
+          <td :colspan="columns.length">
+            <slot name="loading-state">
+              <div :class="ui.loadingState.wrapper">
+                <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
+                <p :class="ui.loadingState.label">
+                  {{ loadingState.label }}
+                </p>
+              </div>
+            </slot>
+          </td>
+        </tr>
+
+        <tr v-else-if="emptyState && !rows.length">
           <td :colspan="columns.length">
             <slot name="empty-state">
               <div :class="ui.emptyState.wrapper">
@@ -106,6 +119,14 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.table.default.sortDescIcon
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingState: {
+      type: Object as PropType<{ icon: string, label: string }>,
+      default: () => appConfig.ui.table.default.loadingState
+    },
     emptyState: {
       type: Object as PropType<{ icon: string, label: string }>,
       default: () => appConfig.ui.table.default.emptyState