improve feed performance

src/stores/feed.js

@@ -5,7 +5,6 @@ import { database } from '../service/database';
 import { useFriendStore } from './friend';
 import { useNotificationStore } from './notification';
 import { useSharedFeedStore } from './sharedFeed';
-import { useUiStore } from './ui';
 import { useVrcxStore } from './vrcx';
 import { watchState } from '../service/watchState';
 
@@ -14,12 +13,11 @@ import configRepository from '../service/config';
 export const useFeedStore = defineStore('Feed', () => {
     const friendStore = useFriendStore();
     const notificationStore = useNotificationStore();
-    const UiStore = useUiStore();
     const vrcxStore = useVrcxStore();
     const sharedFeedStore = useSharedFeedStore();
 
+    const feedTableData = shallowReactive([]);
     const feedTable = ref({
-        data: shallowReactive([]),
         search: '',
         vip: false,
         loading: false,
@@ -31,7 +29,7 @@ export const useFeedStore = defineStore('Feed', () => {
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            feedTable.value.data.length = 0;
+            feedTableData.length = 0;
             if (isLoggedIn) {
                 initFeedTable();
             }
@@ -151,7 +149,8 @@ export const useFeedStore = defineStore('Feed', () => {
             feedTable.value.filter,
             vipList
         );
-        feedTable.value.data = shallowReactive(rows);
+        feedTableData.length = 0;
+        feedTableData.push(...rows.reverse());
         feedTable.value.loading = false;
     }
 
@@ -173,16 +172,14 @@ export const useFeedStore = defineStore('Feed', () => {
         if (!feedSearch(feed)) {
             return;
         }
-        feedTable.value.data.push(feed);
+        feedTableData.unshift(feed);
         sweepFeed();
-        // UiStore.notifyMenu('feed');
     }
 
     function sweepFeed() {
-        const { data } = feedTable.value;
-        const j = data.length;
+        const j = feedTableData.length;
         if (j > vrcxStore.maxTableSize + 50) {
-            data.splice(0, 50);
+            feedTableData.splice(-50, 50);
         }
     }
 
@@ -193,6 +190,7 @@ export const useFeedStore = defineStore('Feed', () => {
 
     return {
         feedTable,
+        feedTableData,
         initFeedTable,
         feedTableLookup,
         addFeed

src/stores/notification.js

@@ -2273,7 +2273,8 @@ export const useNotificationStore = defineStore('Notification', () => {
         }
     }
 
-    function queueFeedNoty(noty) {
+    function queueFeedNoty(feed) {
+        const noty = structuredClone(feed);
         if (noty.type === 'Avatar') {
             return;
         }

src/stores/sharedFeed.js

@@ -241,7 +241,8 @@ export const useSharedFeedStore = defineStore('SharedFeed', () => {
         rebuildOnPlayerJoining(); // also sends updated feed
     }
 
-    async function addEntry(ctx) {
+    async function addEntry(feed) {
+        const ctx = structuredClone(feed);
         const userId = ctx.userId || ctx.senderUserId;
         const wristFilter = notificationsSettingsStore.sharedFeedFilters.wrist;
         if (userId === userStore.currentUser.id) {

src/views/Feed/Feed.vue

@@ -68,13 +68,11 @@
     import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
     import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
 
-    const { feedTable } = storeToRefs(useFeedStore());
+    const { feedTable, feedTableData } = storeToRefs(useFeedStore());
     const { feedTableLookup } = useFeedStore();
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const vrcxStore = useVrcxStore();
 
-    const feedDisplayData = computed(() => feedTable.value.data.slice().reverse());
-
     const { t } = useI18n();
 
     const feedRef = ref(null);
@@ -93,7 +91,7 @@
 
     const { table, pagination } = useVrcxVueTable({
         persistKey: 'feed',
-        data: feedDisplayData,
+        data: feedTableData,
         columns: baseColumns,
         getRowId: (row) => `${row.type}:${row.rowId}:${row.created_at ?? ''}`,
         enableExpanded: true,