fix: improve resource loading handling and skeleton display in ResourceListTable

AdminForth/1968/issue-725--list-view--the-tabl

Author: yaroslav8765

adminforth/spa/src/components/ResourceListTable.vue

@@ -6,21 +6,25 @@
     @scroll="handleScroll"
     ref="containerRef"
   >
-    <!-- skelet loader -->
-    <div 
-      role="status" v-if="!resource || !resource.columns"
-      class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
-    >
-      <div role="status" class="max-w-sm animate-pulse">
-        <div class="h-2 bg-lightListSkeletLoader rounded-full dark:bg-darkListSkeletLoader max-w-[360px]"></div>
-      </div>      
-    </div>
+    <!-- skelet loader: resource is not loaded yet, so its columns are unknown -->
+    <table v-if="!resource" :class="TABLE_CLASSES">
+      <tbody>
+        <tr :class="HEADER_ROW_CLASSES">
+          <td v-for="i in SKELETON_COLUMNS_COUNT" :key="i" class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3">
+            <div role="status" class="h-4 flex items-center animate-pulse">
+              <div class="h-2 w-full max-w-[120px] bg-lightSkeletonBackgroundColor rounded-full dark:bg-darkSkeletonBackgroundColor"></div>
+            </div>
+          </td>
+        </tr>
+        <SkeleteLoader :columns="SKELETON_COLUMNS_COUNT" :rows="3" />
+      </tbody>
+    </table>
 
-    <table v-else class="w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
+    <table v-else :class="TABLE_CLASSES">
 
       <tbody>
         <!-- table header -->
-        <tr class="border-b dark:border-gray-700 t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
+        <tr :class="HEADER_ROW_CLASSES">
           <td scope="col" class="list-table-header-cell p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
@@ -402,6 +406,10 @@ import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { Select } from '@/afcl';
 
+const TABLE_CLASSES = 'w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default';
+const HEADER_ROW_CLASSES = 'border-b dark:border-gray-700 t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText';
+const SKELETON_COLUMNS_COUNT = 5;
+
 const coreStore = useCoreStore();
 const { t } = useI18n();
 const { alert, confirm } = useAdminforth();

adminforth/spa/src/stores/core.ts

@@ -53,14 +53,17 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsError: Ref<string> = ref('');
   const resourceColumnsId: Ref<string | null> = ref(null);
   const adminUser: Ref<null | AdminUser> = ref(null);
+  // /get_resource responses, valid until config is refetched or user logs out
+  const fullResourceCache = new Map<string, AdminForthResourceFrontend>();
+
 
-  
   async function resetAdminUser() {
     adminUser.value = null;
   }
 
   async function resetResource() {
     resource.value = null;
+    fullResourceCache.clear();
   }
 
   async function toggleTheme() {
@@ -99,6 +102,7 @@ export const useCoreStore = defineStore('core', () => {
     }
 
     menu.value = resp.menu;
+    fullResourceCache.clear();
     resourceById.value = resp.resources.reduce((acc: Record<string, ResourceVeryShort>, resource: ResourceVeryShort) => {
       acc[resource.resourceId] = resource;
       return acc;
@@ -237,33 +241,47 @@ export const useCoreStore = defineStore('core', () => {
 
   }
 
+  function applyResource(fullResource: AdminForthResourceFrontend) {
+    resource.value = fullResource;
+    resourceOptions.value = fullResource.options;
+  }
+
   async function fetchResourceFull({ resourceId, forceFetch }: { resourceId: string, forceFetch?: boolean }) {
-    if (resourceColumnsId.value === resourceId && resource.value && !forceFetch) {
-      // already fetched
+    resourceColumnsId.value = resourceId;
+    resourceColumnsError.value = '';
+    const cached = fullResourceCache.get(resourceId);
+    if (cached && !forceFetch) {
+      // applied synchronously so the page renders real columns on the first frame
+      // flag is reset because a request for previously opened resource may still be in flight
+      isResourceFetching.value = false;
+      applyResource(cached);
       return;
     }
     isResourceFetching.value = true;
-    resourceColumnsId.value = resourceId;
-    resourceColumnsError.value = '';
     const res = await callAdminForthApi({
       path: '/get_resource',
       method: 'POST',
       body: {
         resourceId,
       }
     });
+    if (res && !res.error) {
+      fullResourceCache.set(resourceId, res.resource);
+      resourceById.value[resourceId] = res.resource;
+    }
+    if (resourceColumnsId.value !== resourceId) {
+      // user switched to another resource while this request was in flight, that fetch owns the state now
+      return;
+    }
+    isResourceFetching.value = false;
     if (!res) {
-      isResourceFetching.value = false;
       return;
     }
     if (res.error) {
       resourceColumnsError.value = res.error;
     } else {
-      resourceById.value[resourceId] = res.resource;
-      resource.value = res.resource;
-      resourceOptions.value = res.resource.options;
+      applyResource(res.resource);
     }
-    isResourceFetching.value = false;
   }
 
   async function getLoginFormConfig() {

adminforth/spa/src/views/ListView.vue

@@ -147,8 +147,8 @@
       :adminUser="coreStore.adminUser"
     />
     <ResourceListTable
-      v-if="!coreStore.isResourceFetching"
-      :resource="coreStore.resource"
+      v-if="!coreStore.resourceColumnsError"
+      :resource="listResource"
       :rows="rows"
       :page="page"
       @update:page="page = $event"
@@ -268,6 +268,9 @@ const syncPageSize = () => {
   }
 };
 
+// store keeps previous resource until /get_resource for this route resolves, table shows skeleton meanwhile
+const listResource = computed(() => coreStore.resource?.resourceId === route.params.resourceId ? coreStore.resource : null);
+
 const isVirtualScrollEnabled = computed(() => coreStore.resource?.options?.listVirtualScrollEnabled || false);
 const listBufferSize = computed(() => coreStore.resource?.options?.listBufferSize || 30);