optimize favorite worlds tab loading speed

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -1,16 +1,16 @@
 <template>
     <div class="fav-world-item" @click="$emit('click')">
         <div class="x-friend-item">
-            <template v-if="isLocalFavorite ? favorite.name : favorite.ref">
+            <template v-if="favorite.ref">
                 <div class="avatar" v-once>
                     <img :src="smallThumbnail" loading="lazy" decoding="async" fetchpriority="low" />
                 </div>
                 <div class="detail" v-once>
-                    <span class="name">{{ localFavFakeRef.name }}</span>
+                    <span class="name">{{ props.favorite.ref.name }}</span>
-                    <span v-if="localFavFakeRef.occupants" class="extra">
+                    <span v-if="props.favorite.ref.occupants" class="extra">
-                        {{ localFavFakeRef.authorName }} ({{ localFavFakeRef.occupants }})
+                        {{ props.favorite.ref.authorName }} ({{ props.favorite.ref.occupants }})
                     </span>
-                    <span v-else class="extra">{{ localFavFakeRef.authorName }}</span>
+                    <span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
                 </div>
                 <div class="editing">
                     <el-dropdown trigger="hover" size="small" style="margin-left: 5px">
@@ -24,7 +24,7 @@
                             <el-dropdown-menu>
                                 <template v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name">
                                     <el-dropdown-item
-                                        v-if="isLocalFavorite || groupAPI.name !== group.name"
+                                        v-if="groupAPI.name !== group.name"
                                         style="display: block; margin: 10px 0"
                                         :disabled="groupAPI.count >= groupAPI.capacity"
                                         @click="handleDropdownItemClick(groupAPI)">
@@ -34,19 +34,19 @@
                             </el-dropdown-menu>
                         </template>
                     </el-dropdown>
-                    <el-button v-if="!isLocalFavorite" type="text" size="small" @click.stop style="margin-left: 5px">
+                    <el-button type="text" size="small" @click.stop style="margin-left: 5px">
                         <el-checkbox v-model="isSelected"></el-checkbox>
                     </el-button>
                 </div>
                 <div class="default">
                     <el-tooltip
-                        v-if="!isLocalFavorite && favorite.deleted"
+                        v-if="favorite.deleted"
                         placement="left"
                         :content="t('view.favorite.unavailable_tooltip')">
                         <el-icon><Warning /></el-icon>
                     </el-tooltip>
                     <el-tooltip
-                        v-if="!isLocalFavorite && favorite.ref.releaseStatus === 'private'"
+                        v-if="favorite.ref.releaseStatus === 'private'"
                         placement="left"
                         :content="t('view.favorite.private')">
                         <el-icon><Warning /></el-icon>
@@ -66,10 +66,7 @@
                             @click.stop="newInstanceSelfInvite(favorite.id)"
                             circle></el-button>
                     </el-tooltip>
-                    <el-tooltip
+                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
-                        v-if="!isLocalFavorite"
-                        placement="right"
-                        :content="t('view.favorite.unfavorite_tooltip')">
                         <el-button
                             v-if="shiftHeld"
                             size="small"
@@ -87,30 +84,13 @@
                             @click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
                     </el-tooltip>
                 </div>
-                <el-tooltip v-if="isLocalFavorite" placement="right" :content="t('view.favorite.unfavorite_tooltip')">
-                    <el-button
-                        v-if="shiftHeld"
-                        size="small"
-                        :icon="Close"
-                        circle
-                        style="color: #f56c6c; margin-left: 5px"
-                        @click.stop="$emit('remove-local-world-favorite', favorite.id, group)"></el-button>
-                    <el-button
-                        v-else
-                        :icon="Star"
-                        size="small"
-                        circle
-                        style="margin-left: 5px"
-                        type="default"
-                        @click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
-                </el-tooltip>
             </template>
             <template v-else>
                 <div class="avatar"></div>
                 <div class="detail" v-once>
                     <span>{{ favorite.name || favorite.id }}</span>
                     <el-tooltip
-                        v-if="!isLocalFavorite && favorite.deleted"
+                        v-if="favorite.deleted"
                         placement="left"
                         :content="t('view.favorite.unavailable_tooltip')">
                         <el-icon><Warning /></el-icon>
@@ -156,21 +136,20 @@
         set: (value) => emit('handle-select', value)
     });
 
-    const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite.ref));
     const tooltipContent = computed(() =>
         t(props.isLocalFavorite ? 'view.favorite.copy_tooltip' : 'view.favorite.move_tooltip')
     );
 
     const smallThumbnail = computed(() => {
-        const url = localFavFakeRef.value.thumbnailImageUrl?.replace('256', '128');
+        const url = props.favorite.ref.thumbnailImageUrl?.replace('256', '128');
-        return url || localFavFakeRef.value.thumbnailImageUrl;
+        return url || props.favorite.ref.thumbnailImageUrl;
     });
 
     function handleDropdownItemClick(groupAPI) {
         if (props.isLocalFavorite) {
-            addFavoriteWorld(localFavFakeRef.value, groupAPI, true);
+            addFavoriteWorld(props.favorite.ref, groupAPI, true);
         } else {
-            moveFavorite(localFavFakeRef.value, groupAPI, 'world');
+            moveFavorite(props.favorite.ref, groupAPI, 'world');
         }
     }
 
@@ -217,5 +196,6 @@
         display: inline-block;
         width: 300px;
         margin-right: 15px;
+        height: 53px;
     }
 </style>

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="fav-world-item" @click="$emit('click')">
+        <div class="x-friend-item">
+            <template v-if="favorite.name">
+                <div class="avatar" v-once>
+                    <img :src="smallThumbnail" loading="lazy" decoding="async" fetchpriority="low" />
+                </div>
+                <div class="detail" v-once>
+                    <span class="name">{{ props.favorite.name }}</span>
+                    <span v-if="props.favorite.occupants" class="extra">
+                        {{ props.favorite.authorName }} ({{ props.favorite.occupants }})
+                    </span>
+                    <span v-else class="extra">{{ props.favorite.authorName }}</span>
+                </div>
+                <div class="editing">
+                    <el-dropdown trigger="hover" size="small" style="margin-left: 5px">
+                        <div>
+                            <el-button type="default" :icon="Back" size="small" circle></el-button>
+                        </div>
+                        <template #dropdown>
+                            <span style="font-weight: bold; display: block; text-align: center">
+                                {{ t(tooltipContent) }}
+                            </span>
+                            <el-dropdown-menu>
+                                <template v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name">
+                                    <el-dropdown-item
+                                        style="display: block; margin: 10px 0"
+                                        :disabled="groupAPI.count >= groupAPI.capacity"
+                                        @click="handleDropdownItemClick(groupAPI)">
+                                        {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
+                                    </el-dropdown-item>
+                                </template>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </div>
+                <div class="default">
+                    <el-tooltip placement="left">
+                        <template #content>
+                            {{
+                                canOpenInstanceInGame()
+                                    ? t('dialog.world.actions.new_instance_and_open_ingame')
+                                    : t('dialog.world.actions.new_instance_and_self_invite')
+                            }}
+                        </template>
+                        <el-button
+                            size="small"
+                            :icon="Message"
+                            style="margin-left: 5px"
+                            @click.stop="newInstanceSelfInvite(favorite.id)"
+                            circle></el-button>
+                    </el-tooltip>
+                </div>
+                <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                    <el-button
+                        v-if="shiftHeld"
+                        size="small"
+                        :icon="Close"
+                        circle
+                        style="color: #f56c6c; margin-left: 5px"
+                        @click.stop="$emit('remove-local-world-favorite', favorite.id, group)"></el-button>
+                    <el-button
+                        v-else
+                        :icon="Star"
+                        size="small"
+                        circle
+                        style="margin-left: 5px"
+                        type="default"
+                        @click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
+                </el-tooltip>
+            </template>
+            <template v-else>
+                <div class="avatar"></div>
+                <div class="detail" v-once>
+                    <span>{{ favorite.name || favorite.id }}</span>
+                    <el-button
+                        type="text"
+                        :icon="Close"
+                        size="small"
+                        style="margin-left: 5px"
+                        @click.stop="handleDeleteFavorite"></el-button>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { Back, Close, Message, Star } from '@element-plus/icons-vue';
+    import { ElMessage } from 'element-plus';
+    import { computed } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+
+    import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
+    import { favoriteRequest } from '../../../api';
+
+    const props = defineProps({
+        group: [Object, String],
+        favorite: Object
+    });
+
+    const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
+    const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
+    const { showFavoriteDialog } = useFavoriteStore();
+    const { newInstanceSelfInvite } = useInviteStore();
+    const { shiftHeld } = storeToRefs(useUiStore());
+    const { t } = useI18n();
+    const { canOpenInstanceInGame } = useInviteStore();
+
+    const tooltipContent = computed(() => t('view.favorite.copy_tooltip'));
+
+    const smallThumbnail = computed(() => {
+        const url = props.favorite.thumbnailImageUrl?.replace('256', '128');
+        return url || props.favorite.thumbnailImageUrl;
+    });
+
+    function handleDropdownItemClick(groupAPI) {
+        addFavoriteWorld(props.favorite, groupAPI, true);
+    }
+
+    function handleDeleteFavorite() {
+        emit('remove-local-world-favorite', props.favorite.id, props.group);
+    }
+
+    function addFavoriteWorld(refObj, group, message) {
+        return favoriteRequest
+            .addFavorite({
+                type: 'world',
+                favoriteId: refObj.id,
+                tags: group.name
+            })
+            .then((args) => {
+                if (message) {
+                    ElMessage({ message: 'World added to favorites', type: 'success' });
+                }
+                return args;
+            });
+    }
+</script>
+
+<style scoped>
+    .fav-world-item {
+        display: inline-block;
+        width: 300px;
+        margin-right: 15px;
+        height: 53px;
+    }
+</style>

src/views/Favorites/components/FavoritesWorldTab.vue

@@ -113,13 +113,15 @@
                     class="x-friend-list"
                     :class="{ 'is-editing': editFavoritesMode }"
                     style="margin-top: 10px">
-                    <FavoritesWorldItem
+                    <el-scrollbar height="700px" @end-reached="worldFavoritesLoadMore">
-                        v-for="favorite in groupedByGroupKeyFavoriteWorlds[group.key]"
+                        <FavoritesWorldItem
-                        :key="favorite.id"
+                            v-for="favorite in sliceWorldFavorites(group.key)"
-                        :group="group"
+                            :key="favorite.id"
-                        :favorite="favorite"
+                            :group="group"
-                        @click="showWorldDialog(favorite.id)"
+                            :favorite="favorite"
-                        @handle-select="favorite.$selected = $event" />
+                            @click="showWorldDialog(favorite.id)"
+                            @handle-select="favorite.$selected = $event" />
+                    </el-scrollbar>
                 </div>
                 <div
                     v-else
@@ -153,7 +155,7 @@
         </el-button>
         <el-collapse style="border: 0">
             <el-collapse-item v-for="group in localWorldFavoriteGroups" :key="group">
-                <template #title v-if="localWorldFavorites[group]">
+                <template #title>
                     <span style="font-weight: bold; font-size: 14px; margin-left: 10px" v-text="group" />
                     <span style="color: #909399; font-size: 12px; margin-left: 10px">{{
                         getLocalWorldFavoriteGroupLength(group)
@@ -180,14 +182,15 @@
                     class="x-friend-list"
                     :class="{ 'is-editing': editFavoritesMode }"
                     style="margin-top: 10px">
-                    <FavoritesWorldItem
+                    <el-scrollbar height="700px" @end-reached="localWorldFavoritesLoadMore">
-                        v-for="favorite in localWorldFavorites[group]"
+                        <FavoritesWorldLocalItem
-                        :key="favorite.id"
+                            v-for="favorite in sliceLocalWorldFavorites(group)"
-                        is-local-favorite
+                            :key="favorite.id"
-                        :group="group"
+                            :group="group"
-                        :favorite="favorite"
+                            :favorite="favorite"
-                        @click="showWorldDialog(favorite.id)"
+                            @click="showWorldDialog(favorite.id)"
-                        @remove-local-world-favorite="removeLocalWorldFavorite" />
+                            @remove-local-world-favorite="removeLocalWorldFavorite"
+                    /></el-scrollbar>
                 </div>
                 <div
                     v-else
@@ -218,6 +221,7 @@
     import { favoriteRequest } from '../../../api';
 
     import FavoritesWorldItem from './FavoritesWorldItem.vue';
+    import FavoritesWorldLocalItem from './FavoritesWorldLocalItem.vue';
     import WorldExportDialog from '../dialogs/WorldExportDialog.vue';
 
     defineProps({
@@ -257,6 +261,8 @@
     const worldExportDialogVisible = ref(false);
     const worldFavoriteSearch = ref('');
     const worldFavoriteSearchResults = ref([]);
+    const sliceLocalWorldFavoritesLoadMoreNumber = ref(60);
+    const sliceWorldFavoritesLoadMoreNumber = ref(60);
 
     const groupedByGroupKeyFavoriteWorlds = computed(() => {
         const groupedByGroupKeyFavoriteWorlds = {};
@@ -273,6 +279,18 @@
         return groupedByGroupKeyFavoriteWorlds;
     });
 
+    const sliceLocalWorldFavorites = computed(() => {
+        return (group) => {
+            return localWorldFavorites.value[group].slice(0, sliceLocalWorldFavoritesLoadMoreNumber.value);
+        };
+    });
+
+    const sliceWorldFavorites = computed(() => {
+        return (group) => {
+            return groupedByGroupKeyFavoriteWorlds.value[group].slice(0, sliceWorldFavoritesLoadMoreNumber.value);
+        };
+    });
+
     const sortFav = computed({
         get() {
             return sortFavorites.value;
@@ -282,6 +300,18 @@
         }
     });
 
+    function localWorldFavoritesLoadMore(direction) {
+        if (direction === 'bottom') {
+            sliceLocalWorldFavoritesLoadMoreNumber.value += 20;
+        }
+    }
+
+    function worldFavoritesLoadMore(direction) {
+        if (direction === 'bottom') {
+            sliceWorldFavoritesLoadMoreNumber.value += 20;
+        }
+    }
+
     function showExportDialog() {
         worldExportDialogVisible.value = true;
     }