Merge pull request #122 from devforth/improved-table-skeleton-loader

fix: change table skeleton loader to reduce jumps

Author: ivictbor

adminforth/spa/src/components/ResourceListTable.vue

@@ -63,7 +63,8 @@
         <SkeleteLoader 
           v-if="!rows" 
           :columns="resource?.columns.filter(c => c.showIn.list).length + 2"
-          :rows="3"
+          :rows="rowHeights.length || 3"
+          :row-heights="rowHeights"
         />
         <tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
           <td :colspan="resource?.columns.length + 2">
@@ -80,6 +81,7 @@
 
         <tr @click="onClick($event,row)" 
           v-else v-for="(row, rowI) in rows" :key="`row_${row._primaryKeyValue}`"
+          ref="rowRefs"
           class="bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
 
           :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
@@ -269,7 +271,7 @@
 <script setup lang="ts">
 
 
-import { computed, onMounted, ref, watch, type Ref } from 'vue';
+import { computed, onMounted, ref, watch, useTemplateRef, type Ref } from 'vue';
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
@@ -347,6 +349,13 @@ watch(() => props.page, (newPage) => {
   page.value = newPage;
 });
 
+const rowRefs = useTemplateRef('rowRefs');
+const rowHeights = ref([]);
+watch(() => props.rows, (newRows) => {
+  // rows are set to null when new records are loading
+  rowHeights.value = newRows ? [] : rowRefs.value.map((el) => el.offsetHeight);
+});
+
 function addToCheckedValues(id) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);

adminforth/spa/src/components/SkeleteLoader.vue

@@ -1,6 +1,10 @@
 <template>
-    <tr v-for="c in new Array(props.rows)" class="bg-lightListTable border-b dark:bg-darkListTable dark:border-darkListBorder">
-        <td v-for="r in new Array(props.columns)" class="items-center px-6 py-8 cursor-default" >
+    <tr
+        v-for="(r, ri) in new Array(props.rows)"
+        class="bg-lightListTable border-b dark:bg-darkListTable dark:border-darkListBorder"
+        :style="[props.rowHeights[ri] !== undefined ? `height: ${props.rowHeights[ri]}px` : '' ]"
+    >
+        <td v-for="c in new Array(props.columns)" class="items-center px-6 py-8 cursor-default" >
             <div role="status" class="max-w-sm animate-pulse">
                 <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
             </div>
@@ -10,9 +14,12 @@
 
 <script setup lang="ts">
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     columns: number;
     rows: number;
-}>();
+    rowHeights?: number[];
+}>(), {
+    rowHeights: [],
+});
 
 </script>