Fix playerlist table size changing when current instance empty

src/stores/instance.js

@@ -1,4 +1,4 @@
-import { reactive, ref, watch } from 'vue';
+import { reactive, watch, ref, computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
@@ -81,8 +81,12 @@ export const useInstanceStore = defineStore('Instance', () => {
 
     const instanceJoinHistory = ref(new Map());
 
-    const currentInstanceUserList = ref({
+    const currentInstanceUsersData = ref([]);
-        data: [],
+    const currentInstanceUsersTable = computed(() => {
+        return reactive({
+            data: currentInstanceWorld.value.ref.id
+                ? currentInstanceUsersData.value
+                : [],
             tableProps: {
                 stripe: true,
                 size: 'small',
@@ -93,11 +97,12 @@ export const useInstanceStore = defineStore('Instance', () => {
             },
             layout: 'table'
         });
+    });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            currentInstanceUserList.value.data = [];
+            currentInstanceUsersTable.value.data = [];
             instanceJoinHistory.value = new Map();
             previousInstancesInfoDialogVisible.value = false;
             cachedInstances.clear();
@@ -1188,7 +1193,7 @@ export const useInstanceStore = defineStore('Instance', () => {
                 }
             }
         }
-        currentInstanceUserList.value.data = users;
+        currentInstanceUsersTable.value.data = users;
     }
 
     // $app.methods.instanceQueueClear = function () {
@@ -1210,7 +1215,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         previousInstancesInfoDialogVisible,
         previousInstancesInfoDialogInstanceId,
         instanceJoinHistory,
-        currentInstanceUserList,
+        currentInstanceUsersTable,
 
         applyInstance,
         updateCurrentInstanceWorld,

src/views/PlayerList/PlayerList.vue

@@ -189,7 +189,7 @@
 
             <div class="current-instance-table">
                 <DataTable
-                    v-bind="currentInstanceWorld.ref.id ? currentInstanceUserList : {}"
+                    v-bind="currentInstanceUsersTable"
                     style="margin-top: 10px; cursor: pointer"
                     @row-click="selectCurrentInstanceRow">
                     <el-table-column :label="t('table.playerList.avatar')" width="70" prop="photo">
@@ -439,7 +439,7 @@
     const { showWorldDialog } = useWorldStore();
     const { lastLocation } = storeToRefs(useLocationStore());
     const { currentInstanceLocation, currentInstanceWorld } = storeToRefs(useInstanceStore());
-    const { currentInstanceUserList, getCurrentInstanceUserList } = useInstanceStore();
+    const { currentInstanceUsersTable, getCurrentInstanceUserList } = useInstanceStore();
     const { menuActiveIndex } = storeToRefs(useUiStore());
     const { showFullscreenImageDialog } = useGalleryStore();
     const { currentUser } = storeToRefs(useUserStore());