batch-trim session/log tables to reduce churn during high-frequency updates

src/components/DataTable.vue

@@ -18,7 +18,7 @@
                 size="small"
                 :current-page="internalCurrentPage"
                 :page-size="effectivePageSize"
-                :total="filteredData.length"
+                :total="totalItems"
                 v-bind="mergedPaginationProps"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange" />
@@ -29,7 +29,7 @@
 <script>
     import { computed, ref, toRefs, watch } from 'vue';
 
-    import { useAppearanceSettingsStore } from '../stores';
+    import { useAppearanceSettingsStore, useVrcxStore } from '../stores';
 
     export default {
         name: 'DataTable',
@@ -84,6 +84,7 @@
         ],
         setup(props, { emit }) {
             const appearanceSettingsStore = useAppearanceSettingsStore();
+            const vrcxStore = useVrcxStore();
             const { data, currentPage, pageSize, tableProps, paginationProps, filters } = toRefs(props);
 
             const internalCurrentPage = ref(currentPage.value);
@@ -184,6 +185,12 @@
                 return filteredData.value.slice(start, end);
             });
 
+            const totalItems = computed(() => {
+                const length = filteredData.value.length;
+                const max = vrcxStore.maxTableSize;
+                return length > max && length < max + 51 ? max : length;
+            });
+
             const handleSortChange = ({ prop, order }) => {
                 if (props.tableProps.defaultSort) {
                     const { tableProps } = props;
@@ -237,6 +244,7 @@
             );
 
             return {
+                totalItems,
                 internalCurrentPage,
                 internalPageSize,
                 effectivePageSize,

src/stores/feed.js

@@ -173,7 +173,9 @@ export const useFeedStore = defineStore('Feed', () => {
     function addFeed(feed) {
         notificationStore.queueFeedNoty(feed);
         feedSessionTable.value.push(feed);
-        feedSessionTable.value.shift();
+        if (feedSessionTable.value.length > vrcxStore.maxTableSize + 50) {
+            feedSessionTable.value.splice(0, 50);
+        }
         sharedFeedStore.updateSharedFeed(false);
         if (
             feedTable.value.filter.length > 0 &&

src/stores/gameLog.js

@@ -482,8 +482,8 @@ export const useGameLogStore = defineStore('GameLog', () => {
     function sweepGameLog() {
         const { data } = gameLogTable.value;
         const j = data.length;
-        if (j > vrcxStore.maxTableSize) {
+        if (j > vrcxStore.maxTableSize + 50) {
-            data.splice(0, j - vrcxStore.maxTableSize);
+            data.splice(0, 50);
         }
 
         const date = new Date();