friendlog gamelog query data when navigating to pages

src/stores/friend.js

@@ -2,6 +2,7 @@ import { computed, reactive, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import {
     compareByCreatedAtAscending,
@@ -54,6 +55,8 @@ export const useFriendStore = defineStore('Friend', () => {
     const modalStore = useModalStore();
     const { t } = useI18n();
 
+    const router = useRouter();
+
     const state = reactive({
         friendNumber: 0
     });
@@ -89,9 +92,20 @@ export const useFriendStore = defineStore('Friend', () => {
                     !(filter.value && row.type === 'Unfriend')
             }
         ],
-        pageSizeLinked: true
+        pageSizeLinked: true,
+        loading: false
     });
 
+    watch(
+        router.currentRoute,
+        (value) => {
+            if (value.name === 'friend-log') {
+                initFriendLogHistoryTable();
+            }
+        },
+        { immediate: true }
+    );
+
     const vipFriends = computed(() => {
         return Array.from(friends.values())
             .filter((f) => f.state === 'online' && f.isVIP)
@@ -1268,7 +1282,9 @@ export const useFriendStore = defineStore('Friend', () => {
     }
 
     async function initFriendLogHistoryTable() {
+        friendLogTable.value.loading = true;
         friendLogTable.value.data = await database.getFriendLogHistory();
+        friendLogTable.value.loading = false;
     }
 
     /**
@@ -1598,7 +1614,6 @@ export const useFriendStore = defineStore('Friend', () => {
         isRefreshFriendsLoading.value = true;
         watchState.isFriendsLoaded = false;
         friendLog = new Map();
-        await initFriendLogHistoryTable();
 
         try {
             if (await configRepository.getBool(`friendLogInit_${userId}`)) {

src/stores/gameLog.js

@@ -1,6 +1,7 @@
 import { reactive, ref, shallowRef, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
+import { useRouter } from 'vue-router';
 
 import dayjs from 'dayjs';
 
@@ -54,6 +55,8 @@ export const useGameLogStore = defineStore('GameLog', () => {
     const sharedFeedStore = useSharedFeedStore();
     const modalStore = useModalStore();
 
+    const router = useRouter();
+
     const state = reactive({
         lastLocationAvatarList: new Map()
     });
@@ -87,18 +90,22 @@ export const useGameLogStore = defineStore('GameLog', () => {
 
     watch(
         () => watchState.isLoggedIn,
-        (isLoggedIn) => {
+        () => {
             gameLogTableData.value = [];
-            if (isLoggedIn) {
-                // wait for friends to load, silly but works
-                workerTimers.setTimeout(() => {
-                    initGameLogTable();
-                }, 800);
-            }
         },
         { flush: 'sync' }
     );
 
+    watch(
+        router.currentRoute,
+        (value) => {
+            if (value.name === 'game-log') {
+                initGameLogTable();
+            }
+        },
+        { immediate: true }
+    );
+
     watch(
         () => watchState.isFavoritesLoaded,
         (isFavoritesLoaded) => {
@@ -1425,6 +1432,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
     }
 
     async function initGameLogTable() {
+        gameLogTable.value.loading = true;
         const rows = await database.lookupGameLogDatabase(
             gameLogTable.value.filter,
             []
@@ -1434,6 +1442,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
             row.isFavorite = gameLogIsFavorite(row);
         }
         gameLogTableData.value = rows;
+        gameLogTable.value.loading = false;
     }
 
     return {
@@ -1445,7 +1454,6 @@ export const useGameLogStore = defineStore('GameLog', () => {
         lastVideoUrl,
         lastResourceloadUrl,
 
-        initGameLogTable,
         clearNowPlaying,
         tryLoadPlayerList,
         gameLogIsFriend,

src/views/FriendLog/FriendLog.vue

@@ -2,6 +2,7 @@
     <div class="x-container" ref="friendLogRef">
         <DataTableLayout
             :table="table"
+            :loading="friendLogTable.loading"
             :table-style="tableHeightStyle"
             :page-sizes="pageSizes"
             :total-items="totalItems"