From 2b3dc8d065c35671434975a07af4b2182a793b58 Mon Sep 17 00:00:00 2001
From: "Haytham A. Salama" <haythamasalama@gmail.com>
Date: Sun, 30 Jul 2023 00:31:29 +0300
Subject: [PATCH] fix(Table): hide data when loading state is active (#460)

---
 src/runtime/components/data/Table.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 077302750a..dfcfca727c 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -22,18 +22,6 @@
         </tr>
       </thead>
       <tbody :class="ui.tbody">
-        <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
-          <td v-if="modelValue" class="ps-4">
-            <UCheckbox v-model="selected" :value="row" @click.stop />
-          </td>
-
-          <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
-            <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index">
-              {{ row[column.key] }}
-            </slot>
-          </td>
-        </tr>
-
         <tr v-if="loadingState && loading">
           <td :colspan="columns.length + (modelValue ? 1 : 0)">
             <slot name="loading-state">
@@ -59,6 +47,20 @@
             </slot>
           </td>
         </tr>
+
+        <template v-else>
+          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
+            <td v-if="modelValue" class="ps-4">
+              <UCheckbox v-model="selected" :value="row" @click.stop />
+            </td>
+
+            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
+              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index">
+                {{ row[column.key] }}
+              </slot>
+            </td>
+          </tr>
+        </template>
       </tbody>
     </table>
   </div>