reduce favorite tab memory usage

src/App.vue

@@ -17,14 +17,12 @@
             <template v-if="watchState.isLoggedIn">
                 <NavMenu></NavMenu>
 
-                <RouterView v-show="!isSideBarTabShow"></RouterView>
+                <el-splitter @resize-end="setAsideWidth">
-
-                <el-splitter v-show="isSideBarTabShow" @resize-end="setAsideWidth">
                     <el-splitter-panel>
                         <RouterView></RouterView>
                     </el-splitter-panel>
 
-                    <el-splitter-panel :min="250" :max="700" :size="asideWidth" collapsible>
+                    <el-splitter-panel v-if="isSideBarTabShow" :min="250" :max="700" :size="asideWidth" collapsible>
                         <Sidebar></Sidebar>
                     </el-splitter-panel>
                 </el-splitter>

src/views/Favorites/Favorites.vue

@@ -1,15 +1,6 @@
 <template>
     <div class="x-container">
-        <div
+        <div class="header">
-            style="
-                font-size: 13px;
-                position: absolute;
-                display: flex;
-                align-items: center;
-                right: 0;
-                z-index: 1;
-                margin-right: 15px;
-            ">
             <div v-if="editFavoritesMode" style="display: inline-block; margin-right: 10px">
                 <el-button size="small" @click="clearBulkFavoriteSelection">{{ t('view.favorite.clear') }}</el-button>
                 <el-button size="small" @click="handleBulkCopyFavoriteSelection">{{
@@ -23,7 +14,7 @@
                 <span class="name">{{ t('view.favorite.edit_mode') }}</span>
                 <el-switch v-model="editFavoritesMode" style="margin-left: 5px"></el-switch>
             </div>
-            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
+            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')" :teleported="false">
                 <el-button
                     type="default"
                     :loading="isFavoriteLoading"
@@ -45,16 +36,12 @@
             <el-tab-pane name="world" :label="t('view.favorite.worlds.header')" lazy>
                 <FavoritesWorldTab
                     :edit-favorites-mode="editFavoritesMode"
-                    :refresh-local-world-favorites="refreshLocalWorldFavorites"
+                    @change-favorite-group-name="changeFavoriteGroupName" />
-                    @change-favorite-group-name="changeFavoriteGroupName"
-                    @refresh-local-world-favorite="refreshLocalWorldFavorites" />
             </el-tab-pane>
             <el-tab-pane name="avatar" :label="t('view.favorite.avatars.header')" lazy>
                 <FavoritesAvatarTab
                     :edit-favorites-mode="editFavoritesMode"
-                    :refreshing-local-favorites="refreshingLocalFavorites"
+                    @change-favorite-group-name="changeFavoriteGroupName" />
-                    @change-favorite-group-name="changeFavoriteGroupName"
-                    @refresh-local-avatar-favorites="refreshLocalAvatarFavorites" />
             </el-tab-pane>
         </el-tabs>
     </div>
@@ -67,23 +54,19 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { avatarRequest, favoriteRequest, worldRequest } from '../../api';
+    import { favoriteRequest } from '../../api';
-    import { useAvatarStore, useFavoriteStore, useUiStore } from '../../stores';
+    import { useFavoriteStore } from '../../stores';
 
     import FavoritesAvatarTab from './components/FavoritesAvatarTab.vue';
     import FavoritesFriendTab from './components/FavoritesFriendTab.vue';
     import FavoritesWorldTab from './components/FavoritesWorldTab.vue';
 
-    import * as workerTimers from 'worker-timers';
-
     const { t } = useI18n();
     const {
         favoriteFriends,
         favoriteWorlds,
         favoriteAvatars,
         isFavoriteLoading,
-        localAvatarFavoritesList,
-        localWorldFavoritesList,
         avatarImportDialogInput,
         worldImportDialogInput,
         friendImportDialogInput,
@@ -99,10 +82,8 @@
         showWorldImportDialog,
         showAvatarImportDialog
     } = useFavoriteStore();
-    const { applyAvatar } = useAvatarStore();
 
     const editFavoritesMode = ref(false);
-    const refreshingLocalFavorites = ref(false);
 
     function showBulkUnfavoriteSelectionConfirm() {
         const elementsTicked = [];
@@ -232,50 +213,16 @@
 
         console.log('Favorite selection\n', idList);
     }
-
-    async function refreshLocalAvatarFavorites() {
-        if (refreshingLocalFavorites.value) {
-            return;
-        }
-        refreshingLocalFavorites.value = true;
-        for (const avatarId of localAvatarFavoritesList.value) {
-            if (!refreshingLocalFavorites.value) {
-                break;
-            }
-            try {
-                const args = await avatarRequest.getAvatar({
-                    avatarId
-                });
-                applyAvatar(args.json);
-            } catch (err) {
-                console.error(err);
-            }
-            await new Promise((resolve) => {
-                workerTimers.setTimeout(resolve, 1000);
-            });
-        }
-        refreshingLocalFavorites.value = false;
-    }
-    async function refreshLocalWorldFavorites() {
-        if (refreshingLocalFavorites.value) {
-            return;
-        }
-        refreshingLocalFavorites.value = true;
-        for (const worldId of localWorldFavoritesList.value) {
-            if (!refreshingLocalFavorites.value) {
-                break;
-            }
-            try {
-                await worldRequest.getWorld({
-                    worldId
-                });
-            } catch (err) {
-                console.error(err);
-            }
-            await new Promise((resolve) => {
-                workerTimers.setTimeout(resolve, 1000);
-            });
-        }
-        refreshingLocalFavorites.value = false;
-    }
 </script>
+
+<style scoped>
+    .header {
+        font-size: 13px;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        right: 0;
+        z-index: 1;
+        margin-right: 15px;
+    }
+</style>

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -10,7 +10,7 @@
                     <span class="extra" v-text="localFavFakeRef.authorName"></span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px">
+                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
                         <div>
                             <el-button type="default" :icon="Back" size="small" circle></el-button>
                         </div>
@@ -40,19 +40,22 @@
                         <el-tooltip
                             v-if="favorite.deleted"
                             placement="left"
-                            :content="t('view.favorite.unavailable_tooltip')">
+                            :content="t('view.favorite.unavailable_tooltip')"
+                            :teleported="false">
                             <el-icon><Warning /></el-icon>
                         </el-tooltip>
                         <el-tooltip
                             v-if="favorite.ref.releaseStatus === 'private'"
                             placement="left"
-                            :content="t('view.favorite.private')">
+                            :content="t('view.favorite.private')"
+                            :teleported="false">
                             <el-icon><Warning /></el-icon>
                         </el-tooltip>
                         <el-tooltip
                             v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
                             placement="left"
-                            :content="t('view.favorite.select_avatar_tooltip')">
+                            :content="t('view.favorite.select_avatar_tooltip')"
+                            :teleported="false">
                             <el-button
                                 :disabled="currentUser.currentAvatar === favorite.id"
                                 size="small"
@@ -61,7 +64,10 @@
                                 style="margin-left: 5px"
                                 @click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
                         </el-tooltip>
-                        <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                        <el-tooltip
+                            placement="right"
+                            :content="t('view.favorite.unfavorite_tooltip')"
+                            :teleported="false">
                             <el-button
                                 v-if="shiftHeld"
                                 size="small"
@@ -80,7 +86,10 @@
                         </el-tooltip>
                     </template>
                     <template v-else>
-                        <el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
+                        <el-tooltip
+                            placement="left"
+                            :content="t('view.favorite.select_avatar_tooltip')"
+                            :teleported="false">
                             <el-button
                                 :disabled="currentUser.currentAvatar === favorite.id"
                                 size="small"
@@ -93,7 +102,8 @@
                     <el-tooltip
                         v-if="isLocalFavorite"
                         placement="right"
-                        :content="t('view.favorite.unfavorite_tooltip')">
+                        :content="t('view.favorite.unfavorite_tooltip')"
+                        :teleported="false">
                         <el-button
                             v-if="shiftHeld"
                             size="small"

src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue

@@ -8,7 +8,7 @@
                 <span class="name" v-text="favorite.name"></span>
                 <span class="extra" v-text="favorite.authorName"></span>
             </div>
-            <el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
+            <el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')" :teleported="false">
                 <el-button
                     :disabled="currentUser.currentAvatar === favorite.id"
                     size="small"
@@ -18,7 +18,7 @@
                     @click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
             </el-tooltip>
             <template v-if="cachedFavoritesByObjectId.has(favorite.id)">
-                <el-tooltip placement="right" content="Favorite">
+                <el-tooltip placement="right" content="Favorite" :teleported="false">
                     <el-button
                         type="default"
                         :icon="Star"
@@ -29,7 +29,7 @@
                 </el-tooltip>
             </template>
             <template v-else>
-                <el-tooltip placement="right" content="Favorite">
+                <el-tooltip placement="right" content="Favorite" :teleported="false">
                     <el-button
                         type="default"
                         :icon="StarFilled"

src/views/Favorites/components/FavoritesAvatarTab.vue

@@ -65,7 +65,7 @@
                     <span style="color: #909399; font-size: 12px; margin-left: 10px">
                         {{ group.count }}/{{ group.capacity }}
                     </span>
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
+                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Edit"
@@ -73,7 +73,7 @@
                             style="margin-left: 10px"
                             @click.stop="changeFavoriteGroupName(group)" />
                     </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')">
+                    <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Delete"
@@ -115,7 +115,7 @@
                     <span style="color: #909399; font-size: 12px; margin-left: 10px"
                         >{{ avatarHistoryArray.length }}/100</span
                     >
-                    <el-tooltip placement="right" content="Clear">
+                    <el-tooltip placement="right" content="Clear" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Delete"
@@ -157,7 +157,7 @@
                 @click="refreshLocalAvatarFavorites">
                 {{ t('view.favorite.avatars.refresh') }}
             </el-button>
-            <el-button v-else size="small" style="margin-left: 5px" @click="refreshingLocalFavorites = false">
+            <el-button v-else size="small" style="margin-left: 5px" @click="cancelLocalAvatarRefresh">
                 <el-icon class="is-loading"><Loading /></el-icon>
                 <span>{{ t('view.favorite.avatars.cancel_refresh') }}</span>
             </el-button>
@@ -167,7 +167,7 @@
                     <span :style="{ color: '#909399', fontSize: '12px', marginLeft: '10px' }">{{
                         getLocalAvatarFavoriteGroupLength(group)
                     }}</span>
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
+                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Edit"
@@ -175,7 +175,7 @@
                             :style="{ marginLeft: '5px' }"
                             @click.stop="promptLocalAvatarFavoriteGroupRename(group)"></el-button>
                     </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')">
+                    <el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Delete"
@@ -219,26 +219,24 @@
 
 <script setup>
     import { Delete, Edit, Loading } from '@element-plus/icons-vue';
-    import { computed, ref } from 'vue';
+    import { computed, onBeforeUnmount, ref } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../../stores';
-    import { favoriteRequest } from '../../../api';
+    import { avatarRequest, favoriteRequest } from '../../../api';
 
     import AvatarExportDialog from '../dialogs/AvatarExportDialog.vue';
     import FavoritesAvatarItem from './FavoritesAvatarItem.vue';
     import FavoritesAvatarLocalHistoryItem from './FavoritesAvatarLocalHistoryItem.vue';
 
+    import * as workerTimers from 'worker-timers';
+
     defineProps({
         editFavoritesMode: {
             type: Boolean,
             default: false
-        },
-        refreshingLocalFavorites: {
-            type: Boolean,
-            default: false
         }
     });
 
@@ -246,8 +244,13 @@
 
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
     const { setSortFavorites } = useAppearanceSettingsStore();
-    const { favoriteAvatars, favoriteAvatarGroups, localAvatarFavorites, localAvatarFavoriteGroups } =
+    const {
-        storeToRefs(useFavoriteStore());
+        favoriteAvatars,
+        favoriteAvatarGroups,
+        localAvatarFavorites,
+        localAvatarFavoriteGroups,
+        localAvatarFavoritesList
+    } = storeToRefs(useFavoriteStore());
     const {
         showAvatarImportDialog,
         getLocalAvatarFavoriteGroupLength,
@@ -256,13 +259,16 @@
         newLocalAvatarFavoriteGroup
     } = useFavoriteStore();
     const { avatarHistoryArray } = storeToRefs(useAvatarStore());
-    const { promptClearAvatarHistory, showAvatarDialog } = useAvatarStore();
+    const { promptClearAvatarHistory, showAvatarDialog, applyAvatar } = useAvatarStore();
     const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
     const { t } = useI18n();
 
     const avatarExportDialogVisible = ref(false);
     const avatarFavoriteSearch = ref('');
     const avatarFavoriteSearchResults = ref([]);
+    const refreshingLocalFavorites = ref(false);
+    const worker = ref(null);
+    const refreshCancelToken = ref(null);
 
     const sortFav = computed({
         get() {
@@ -384,10 +390,6 @@
             .catch(() => {});
     }
 
-    function refreshLocalAvatarFavorites() {
-        emit('refresh-local-avatar-favorites');
-    }
-
     function promptLocalAvatarFavoriteGroupRename(group) {
         ElMessageBox.prompt(
             t('prompt.local_favorite_group_rename.description'),
@@ -422,6 +424,73 @@
             })
             .catch(() => {});
     }
+
+    async function refreshLocalAvatarFavorites() {
+        if (refreshingLocalFavorites.value) {
+            return;
+        }
+        refreshingLocalFavorites.value = true;
+        const token = {
+            cancelled: false,
+            resolve: null
+        };
+        refreshCancelToken.value = token;
+        try {
+            for (const avatarId of localAvatarFavoritesList.value) {
+                if (token.cancelled) {
+                    break;
+                }
+                try {
+                    const args = await avatarRequest.getAvatar({
+                        avatarId
+                    });
+                    applyAvatar(args.json);
+                } catch (err) {
+                    console.error(err);
+                }
+                if (token.cancelled) {
+                    break;
+                }
+                await new Promise((resolve) => {
+                    token.resolve = resolve;
+                    worker.value = workerTimers.setTimeout(() => {
+                        worker.value = null;
+                        resolve();
+                    }, 1000);
+                });
+            }
+        } finally {
+            if (worker.value) {
+                workerTimers.clearTimeout(worker.value);
+                worker.value = null;
+            }
+            if (refreshCancelToken.value === token) {
+                refreshCancelToken.value = null;
+            }
+            refreshingLocalFavorites.value = false;
+        }
+    }
+
+    function cancelLocalAvatarRefresh() {
+        if (!refreshingLocalFavorites.value) {
+            return;
+        }
+        if (refreshCancelToken.value) {
+            refreshCancelToken.value.cancelled = true;
+            if (typeof refreshCancelToken.value.resolve === 'function') {
+                refreshCancelToken.value.resolve();
+            }
+        }
+        if (worker.value) {
+            workerTimers.clearTimeout(worker.value);
+            worker.value = null;
+        }
+        refreshingLocalFavorites.value = false;
+    }
+
+    onBeforeUnmount(() => {
+        cancelLocalAvatarRefresh();
+    });
 </script>
 
 <style scoped>

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -19,7 +19,7 @@
                     <span v-else v-text="favorite.ref.statusDescription"></span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px">
+                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
                         <div>
                             <el-button type="default" :icon="Back" size="small" circle></el-button>
                         </div>
@@ -45,7 +45,7 @@
                     </el-button>
                 </div>
                 <div class="default">
-                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
                         <el-button
                             v-if="shiftHeld"
                             size="small"

src/views/Favorites/components/FavoritesFriendTab.vue

@@ -29,7 +29,7 @@
                     <span style="color: #909399; font-size: 12px; margin-left: 10px"
                         >{{ group.count }}/{{ group.capacity }}</span
                     >
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
+                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Edit"
@@ -37,7 +37,7 @@
                             style="margin-left: 10px"
                             @click.stop="changeFavoriteGroupName(group)"></el-button>
                     </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')">
+                    <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Delete"

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -13,7 +13,7 @@
                     <span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px">
+                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
                         <div>
                             <el-button type="default" :icon="Back" size="small" circle></el-button>
                         </div>
@@ -42,16 +42,18 @@
                     <el-tooltip
                         v-if="favorite.deleted"
                         placement="left"
-                        :content="t('view.favorite.unavailable_tooltip')">
+                        :content="t('view.favorite.unavailable_tooltip')"
+                        :teleported="false">
                         <el-icon><Warning /></el-icon>
                     </el-tooltip>
                     <el-tooltip
                         v-if="favorite.ref.releaseStatus === 'private'"
                         placement="left"
-                        :content="t('view.favorite.private')">
+                        :content="t('view.favorite.private')"
+                        :teleported="false">
                         <el-icon><Warning /></el-icon>
                     </el-tooltip>
-                    <el-tooltip placement="left">
+                    <el-tooltip placement="left" :teleported="false">
                         <template #content>
                             {{
                                 canOpenInstanceInGame()
@@ -66,7 +68,7 @@
                             @click.stop="newInstanceSelfInvite(favorite.id)"
                             circle></el-button>
                     </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
                         <el-button
                             v-if="shiftHeld"
                             size="small"
@@ -92,7 +94,8 @@
                     <el-tooltip
                         v-if="favorite.deleted"
                         placement="left"
-                        :content="t('view.favorite.unavailable_tooltip')">
+                        :content="t('view.favorite.unavailable_tooltip')"
+                        :teleported="false">
                         <el-icon><Warning /></el-icon>
                     </el-tooltip>
                     <el-button

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -13,7 +13,7 @@
                     <span v-else class="extra">{{ props.favorite.authorName }}</span>
                 </div>
                 <div class="editing">
-                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px">
+                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
                         <div>
                             <el-button type="default" :icon="Back" size="small" circle></el-button>
                         </div>
@@ -51,7 +51,7 @@
                             circle></el-button>
                     </el-tooltip>
                 </div>
-                <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
                     <el-button
                         v-if="shiftHeld"
                         size="small"

src/views/Favorites/components/FavoritesWorldTab.vue

@@ -71,8 +71,11 @@
                         >
                         <span style="color: #909399; font-size: 12px; margin-left: 10px"
                             >{{ group.count }}/{{ group.capacity }}</span
-                        ><el-tooltip placement="top" :content="t('view.favorite.visibility_tooltip')">
+                        ><el-tooltip
-                            <el-dropdown trigger="click" size="small" style="margin-left: 10px">
+                            placement="top"
+                            :content="t('view.favorite.visibility_tooltip')"
+                            :teleported="false">
+                            <el-dropdown trigger="click" size="small" style="margin-left: 10px" :persistent="false">
                                 <el-button type="default" :icon="View" size="small" circle @click.stop />
                                 <template #dropdown>
                                     <el-dropdown-menu>
@@ -90,7 +93,7 @@
                                 </template>
                             </el-dropdown>
                         </el-tooltip>
-                        <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
+                        <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
                             <el-button
                                 size="small"
                                 :icon="Edit"
@@ -98,7 +101,7 @@
                                 style="margin-left: 5px"
                                 @click.stop="changeFavoriteGroupName(group)" />
                         </el-tooltip>
-                        <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')">
+                        <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
                             <el-button
                                 size="small"
                                 :icon="Delete"
@@ -146,10 +149,10 @@
             v-if="!refreshingLocalFavorites"
             size="small"
             style="margin-left: 5px"
-            @click="refreshLocalWorldFavorite"
+            @click="refreshLocalWorldFavorites"
             >{{ t('view.favorite.worlds.refresh') }}</el-button
         >
-        <el-button v-else size="small" style="margin-left: 5px" @click="refreshingLocalFavorites = false">
+        <el-button v-else size="small" style="margin-left: 5px" @click="cancelLocalWorldRefresh">
             <el-icon style="margin-right: 5px"><Loading /></el-icon>
             <span>{{ t('view.favorite.worlds.cancel_refresh') }}</span>
         </el-button>
@@ -160,7 +163,7 @@
                     <span style="color: #909399; font-size: 12px; margin-left: 10px">{{
                         getLocalWorldFavoriteGroupLength(group)
                     }}</span>
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
+                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Edit"
@@ -168,7 +171,7 @@
                             style="margin-left: 10px"
                             @click.stop="promptLocalWorldFavoriteGroupRename(group)" />
                     </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')">
+                    <el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')" :teleported="false">
                         <el-button
                             size="small"
                             :icon="Delete"
@@ -212,26 +215,24 @@
 
 <script setup>
     import { Delete, Edit, Loading, View } from '@element-plus/icons-vue';
+    import { computed, onBeforeUnmount, ref } from 'vue';
     import { ElMessage, ElMessageBox } from 'element-plus';
-    import { computed, ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../../stores';
-    import { favoriteRequest } from '../../../api';
+    import { favoriteRequest, worldRequest } from '../../../api';
 
     import FavoritesWorldItem from './FavoritesWorldItem.vue';
     import FavoritesWorldLocalItem from './FavoritesWorldLocalItem.vue';
     import WorldExportDialog from '../dialogs/WorldExportDialog.vue';
 
+    import * as workerTimers from 'worker-timers';
+
     defineProps({
         editFavoritesMode: {
             type: Boolean,
             default: false
-        },
-        refreshingLocalFavorites: {
-            type: Boolean,
-            default: false
         }
     });
 
@@ -244,8 +245,13 @@
     const { t } = useI18n();
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
     const { setSortFavorites } = useAppearanceSettingsStore();
-    const { favoriteWorlds, favoriteWorldGroups, localWorldFavorites, localWorldFavoriteGroups } =
+    const {
-        storeToRefs(useFavoriteStore());
+        favoriteWorlds,
+        favoriteWorldGroups,
+        localWorldFavorites,
+        localWorldFavoriteGroups,
+        localWorldFavoritesList
+    } = storeToRefs(useFavoriteStore());
     const {
         showWorldImportDialog,
         getLocalWorldFavoriteGroupLength,
@@ -263,6 +269,9 @@
     const worldFavoriteSearchResults = ref([]);
     const sliceLocalWorldFavoritesLoadMoreNumber = ref(60);
     const sliceWorldFavoritesLoadMoreNumber = ref(60);
+    const refreshingLocalFavorites = ref(false);
+    const worker = ref(null);
+    const refreshCancelToken = ref(null);
 
     const groupedByGroupKeyFavoriteWorlds = computed(() => {
         const groupedByGroupKeyFavoriteWorlds = {};
@@ -475,9 +484,71 @@
         emit('change-favorite-group-name', group);
     }
 
-    function refreshLocalWorldFavorite() {
+    async function refreshLocalWorldFavorites() {
-        emit('refresh-local-world-favorite');
+        if (refreshingLocalFavorites.value) {
+            return;
+        }
+        refreshingLocalFavorites.value = true;
+        const token = {
+            cancelled: false,
+            resolve: null
+        };
+        refreshCancelToken.value = token;
+        try {
+            for (const worldId of localWorldFavoritesList.value) {
+                if (token.cancelled) {
+                    break;
+                }
+                try {
+                    await worldRequest.getWorld({
+                        worldId
+                    });
+                } catch (err) {
+                    console.error(err);
+                }
+                if (token.cancelled) {
+                    break;
+                }
+                await new Promise((resolve) => {
+                    token.resolve = resolve;
+                    worker.value = workerTimers.setTimeout(() => {
+                        worker.value = null;
+                        resolve();
+                    }, 1000);
+                });
+            }
+        } finally {
+            if (worker.value) {
+                workerTimers.clearTimeout(worker.value);
+                worker.value = null;
+            }
+            if (refreshCancelToken.value === token) {
+                refreshCancelToken.value = null;
+            }
+            refreshingLocalFavorites.value = false;
+        }
     }
+
+    function cancelLocalWorldRefresh() {
+        if (!refreshingLocalFavorites.value) {
+            return;
+        }
+        if (refreshCancelToken.value) {
+            refreshCancelToken.value.cancelled = true;
+            if (typeof refreshCancelToken.value.resolve === 'function') {
+                refreshCancelToken.value.resolve();
+            }
+        }
+        if (worker.value) {
+            workerTimers.clearTimeout(worker.value);
+            worker.value = null;
+        }
+        refreshingLocalFavorites.value = false;
+    }
+
+    onBeforeUnmount(() => {
+        cancelLocalWorldRefresh();
+    });
 </script>
 
 <style scoped>