Update UI on instance fetch

src/components/DataTable.vue

@@ -95,7 +95,7 @@
 
             const mergedPaginationProps = computed(() => ({
                 layout: 'sizes, prev, pager, next, total',
-                pageSizes: [20, 50, 100, 200],
+                pageSizes: [10, 15, 20, 25, 50, 100],
                 small: true,
                 ...paginationProps.value
             }));

src/components/Location.vue

@@ -22,7 +22,8 @@
 
 <script setup>
     import { Loading, Lock, WarnTriangleFilled } from '@element-plus/icons-vue';
-    import { ref, watchEffect } from 'vue';
+    import { ref, watchEffect, watch } from 'vue';
+    import { storeToRefs } from 'pinia';
     import { getGroupName, getWorldName, parseLocation } from '../shared/utils';
     import { useGroupStore, useInstanceStore, useSearchStore, useWorldStore } from '../stores';
     import { useI18n } from 'vue-i18n';
@@ -33,6 +34,7 @@
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { verifyShortName } = useSearchStore();
     const { cachedInstances } = useInstanceStore();
+    const { lastInstanceApplied } = storeToRefs(useInstanceStore());
 
     const props = defineProps({
         location: String,
@@ -63,6 +65,16 @@
         parse();
     });
 
+    watch(
+        () => lastInstanceApplied.value,
+        (instanceId) => {
+            if (instanceId === currentInstanceId()) {
+                parse();
+            }
+        },
+        { immediate: true }
+    );
+
     function currentInstanceId() {
         if (typeof props.traveling !== 'undefined' && props.location === 'traveling') {
             return props.traveling;

src/components/LocationWorld.vue

@@ -16,11 +16,13 @@
 <script setup>
     import { Lock, Unlock, WarnTriangleFilled } from '@element-plus/icons-vue';
     import { ref, watch } from 'vue';
+    import { storeToRefs } from 'pinia';
     import { getGroupName, parseLocation } from '../shared/utils';
     import { useGroupStore, useLaunchStore, useInstanceStore } from '../stores';
     import { useI18n } from 'vue-i18n';
     const { t } = useI18n();
     const { cachedInstances } = useInstanceStore();
+    const { lastInstanceApplied } = storeToRefs(useInstanceStore());
 
     const launchStore = useLaunchStore();
     const groupStore = useGroupStore();
@@ -95,6 +97,16 @@
 
     watch(() => props.locationobject, parse, { immediate: true });
 
+    watch(
+        () => lastInstanceApplied.value,
+        (instanceId) => {
+            if (instanceId === location.value) {
+                parse();
+            }
+        },
+        { immediate: true }
+    );
+
     function showLaunchDialog() {
         launchStore.showLaunchDialog(location.value, shortName.value);
     }

src/stores/instance.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { computed, reactive, watch } from 'vue';
+import { computed, reactive, watch, ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { instanceRequest, userRequest, worldRequest } from '../api';
 import configRepository from '../service/config';
@@ -82,6 +82,8 @@ export const useInstanceStore = defineStore('Instance', () => {
 
     let cachedInstances = new Map();
 
+    const lastInstanceApplied = ref('');
+
     const currentInstanceWorld = computed({
         get: () => state.currentInstanceWorld,
         set: (value) => {
@@ -417,6 +419,7 @@ export const useInstanceStore = defineStore('Instance', () => {
                 groupInstance.instance = ref;
             }
         }
+        lastInstanceApplied.value = ref.id;
         return ref;
     }
 
@@ -1230,6 +1233,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         state,
 
         cachedInstances,
+        lastInstanceApplied,
         currentInstanceWorld,
         currentInstanceLocation,
         queuedInstances,