add some table loading spinner

src/components/ui/data-table/DataTableLayout.vue

@@ -5,7 +5,7 @@
         </div>
 
         <div class="rounded-md border">
-            <div class="max-w-full overflow-auto" :style="tableStyle">
+            <div class="max-w-full overflow-auto relative" :style="tableStyle">
                 <Table :class="tableClassValue" :style="tableElementStyle">
                     <colgroup>
                         <col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -67,6 +67,9 @@
                         </TableRow>
                     </TableBody>
                 </Table>
+                <div v-if="loading" class="absolute inset-0 z-20 flex items-center justify-center bg-background/60">
+                    <Spinner class="text-2xl" />
+                </div>
             </div>
         </div>
 
@@ -114,7 +117,10 @@
 
 <script setup>
     import { FlexRender } from '@tanstack/vue-table';
+    import { Spinner } from '@/components/ui/spinner';
     import { computed } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { useAppearanceSettingsStore } from '@/stores/';
     import { useI18n } from 'vue-i18n';
 
     import {
@@ -127,8 +133,6 @@
     } from '../pagination';
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
-    import { useAppearanceSettingsStore } from '@/stores/';
-    import { storeToRefs } from 'pinia';
 
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const { isDataTableStriped } = storeToRefs(appearanceSettingsStore);

src/stores/friend.js

@@ -89,7 +89,6 @@ export const useFriendStore = defineStore('Friend', () => {
                     !(filter.value && row.type === 'Unfriend')
             }
         ],
-        pageSize: 20,
         pageSizeLinked: true
     });
 

src/stores/sharedFeed.js

@@ -73,7 +73,11 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         onPlayerJoining.value = newOnPlayerJoining;
 
         sharedFeedData.value = sharedFeedData.value.filter(
-            (ctx) => ctx.type !== 'OnPlayerJoining' && !ctx.isTraveling
+            (ctx) =>
+                !(
+                    ctx.type === 'OnPlayerJoining' ||
+                    (ctx.type === 'GPS' && ctx.isTraveling)
+                )
         );
         sharedFeedData.value.unshift(...onPlayerJoining.value);
         if (sharedFeedData.value.length > maxEntries) {