From 43f4f6f8b262b28c77062c8dcdbcce7aff1a18e0 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 8 Aug 2025 16:19:55 +0800
Subject: [PATCH] use placeholder data for paginated queries

---
 next-ui/src/colada/users.ts                           |  2 ++
 .../fragment/user/AuthenticationActivityTable.vue     | 11 ++++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/next-ui/src/colada/users.ts b/next-ui/src/colada/users.ts
index a58f7a32..0422e75f 100644
--- a/next-ui/src/colada/users.ts
+++ b/next-ui/src/colada/users.ts
@@ -214,6 +214,7 @@ export const authenticationActivityQuery = defineQueryOptions(
         })
         // unwrap the openapi-fetch structure on success
         .then((res) => res.data),
+    placeholderData: (previousData: any) => previousData, // eslint-disable-line @typescript-eslint/no-explicit-any
   }),
 )
 
@@ -243,5 +244,6 @@ export const myAuthenticationActivityQuery = defineQueryOptions(
         })
         // unwrap the openapi-fetch structure on success
         .then((res) => res.data),
+    placeholderData: (previousData: any) => previousData, // eslint-disable-line @typescript-eslint/no-explicit-any
   }),
 )
diff --git a/next-ui/src/fragments/fragment/user/AuthenticationActivityTable.vue b/next-ui/src/fragments/fragment/user/AuthenticationActivityTable.vue
index d18abf37..42ca66a8 100644
--- a/next-ui/src/fragments/fragment/user/AuthenticationActivityTable.vue
+++ b/next-ui/src/fragments/fragment/user/AuthenticationActivityTable.vue
@@ -1,8 +1,9 @@
 <template>
   <v-data-table-server
+    v-model:sort-by="sortBy"
     :loading="isLoading"
     :items="data?.content"
-    :items-length="lastTotalElements"
+    :items-length="data?.totalElements || 0"
     :headers="headers"
     fixed-header
     fixed-footer
@@ -73,6 +74,8 @@ const intl = useIntl()
 
 const { forMe = false } = defineProps<{ forMe?: boolean }>()
 
+const sortBy = ref<SortItem[]>([{ key: 'dateTime', order: 'desc' }])
+
 const headers = computed(() => {
   const h = []
   if (!forMe)
@@ -153,12 +156,6 @@ const { data, isLoading, error } = useQuery(
   () => ({ ...pageRequest.value }),
 )
 
-const lastTotalElements = ref<number>(0)
-watch(data, (data) => {
-  // to avoid NaN showing in the table footer
-  if (data && data.totalElements) lastTotalElements.value = data.totalElements
-})
-
 function updateOptions({
   page,
   itemsPerPage,