improve gamelog and prev info performance

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -28,8 +28,8 @@
             </el-table-column>
             <el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
                 <template #default="scope">
-                    <template v-if="gameLogIsFriend(scope.row)">
+                    <template v-if="scope.row?.isFriend">
-                        <TooltipWrapper v-if="gameLogIsFavorite(scope.row)" side="top" content="Favorite">
+                        <TooltipWrapper v-if="scope.row?.isFavorite" side="top" content="Favorite">
                             <span>⭐</span>
                         </TooltipWrapper>
                         <TooltipWrapper v-else side="top" content="Friend">
@@ -146,6 +146,8 @@
             const array = [];
             for (const entry of Array.from(data.values())) {
                 entry.timer = timeToText(entry.time);
+                entry.isFriend = gameLogIsFriend(entry);
+                entry.isFavorite = gameLogIsFavorite(entry);
                 array.push(entry);
             }
             array.sort(compareByCreatedAt);

src/stores/gameLog.js

@@ -94,7 +94,10 @@ export const useGameLogStore = defineStore('GameLog', () => {
             gameLogTable.value.data.length = 0;
             gameLogSessionTable.value = [];
             if (isLoggedIn) {
+                // wait for friends to load, silly but works
+                setTimeout(() => {
                     initGameLogTable();
+                }, 800);
             }
         },
         { flush: 'sync' }
@@ -342,11 +345,18 @@ export const useGameLogStore = defineStore('GameLog', () => {
             gameLogTable.value.filter,
             vipList
         );
+
+        for (const row of rows) {
+            row.isFriend = gameLogIsFriend(row);
+            row.isFavorite = gameLogIsFavorite(row);
+        }
         gameLogTable.value.data = shallowReactive(rows);
         gameLogTable.value.loading = false;
     }
 
     function addGameLog(entry) {
+        entry.isFriend = gameLogIsFriend(entry);
+        entry.isFavorite = gameLogIsFavorite(entry);
         gameLogSessionTable.value.push(entry);
         sweepGameLogSessionTable();
         sharedFeedStore.updateSharedFeed(false);
@@ -386,10 +396,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
         if (!gameLogSearch(entry)) {
             return;
         }
-        gameLogTable.value.data.push({
+        gameLogTable.value.data.push(entry);
-            ...entry,
-            uid: crypto.randomUUID()
-        });
         sweepGameLog();
         uiStore.notifyMenu('game-log');
     }
@@ -1428,6 +1435,10 @@ export const useGameLogStore = defineStore('GameLog', () => {
             gameLogTable.value.search,
             gameLogTable.value.filter
         );
+        for (const row of rows) {
+            row.isFriend = gameLogIsFriend(row);
+            row.isFavorite = gameLogIsFavorite(row);
+        }
         gameLogTable.value.data = shallowReactive(rows);
     }
 

src/views/GameLog/columns.jsx

@@ -116,6 +116,8 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
             header: () => t('table.gameLog.user'),
             cell: ({ row }) => {
                 const original = row.original;
+                const isFriend = original.isFriend;
+                const isFavorite = original.isFavorite;
                 return (
                     <span>
                         {original.displayName ? (
@@ -126,10 +128,8 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                                 {original.displayName}
                             </span>
                         ) : null}
-                        {gameLogIsFriend(original) ? (
+                        {isFriend ? (
-                            <span>
+                            <span>{isFavorite ? '⭐' : '💚'}</span>
-                                {gameLogIsFavorite(original) ? '⭐' : '💚'}
-                            </span>
                         ) : null}
                     </span>
                 );