fix Load

src/components/SkeletonTable.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+/** importType*/
+import type { QTableProps } from 'quasar'
+
+const columns = defineModel<QTableProps['columns']>('columns', {
+  required: true,
+})
+
+const rows = ref<Array<{ id: string; name: string }>>([
+  {
+    id: '',
+    name: '',
+  },
+])
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
+</script>
+
+<template>
+  <q-table
+    flat
+    class="custom-table2"
+    bordered
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    hide-pagination
+    :grid="$q.screen.gt.xs ? false : true"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width> </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props">
+      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list dense>
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </q-table>
+</template>
+
+<style scoped lang="scss">
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+  .text-caption {
+    text-align: left;
+  }
+}
+.q-card-section-last {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/TableHistory.vue

@@ -4,17 +4,16 @@ import { ref, watch } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 import { useChekIn } from '@/stores/chekin'
 
-import type { QTableProps } from 'quasar'
+import { is, type QTableProps } from 'quasar'
 import type { Pagination, DataCheckIn } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
-const { date2Thai } = useCounterMixin()
+import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
 
+const { date2Thai } = useCounterMixin()
 const stores = useChekIn()
 
-/**
- * props ข้อมูลจาก Components Page HistoryView
- */
+/** props ข้อมูลจาก Components Page HistoryView */
 const props = defineProps({
   paging: {
     type: Boolean,
@@ -49,9 +48,12 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function'),
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['update:change-page'])
-
 const keyword = ref<string>('')
 const tab = ref<string>(props.tab?.toString())
 const selected = ref<string[]>([])
@@ -270,9 +272,7 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
   }
 }
 
-/**
- * watch currentPage และ rowsPerPage
- */
+/** watch currentPage และ rowsPerPage*/
 watch(
   [() => currentPage.value, () => initialPagination.value.rowsPerPage],
   () => {
@@ -322,7 +322,10 @@ watch(
     </div>
   </div>
 
+  <SkeletonTable v-if="props.isLoading" :columns="columns" />
+
   <q-table
+    v-else
     flat
     bordered
     class="custom-table2"