MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 06:13:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Optimize Favorite Tab Loading Performance (#1106)

Browse Source
This commit is contained in:
pa
2025-01-30 14:03:03 +09:00
committed by GitHub
parent e6a072563a
commit 3fda9b771c
2 changed files with 177 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/app.js
View File

@@ -7201,6 +7201,21 @@ console.log(`isLinux: ${LINUX}`);
return this.favoriteFriendsSorted;
};
$app.computed.groupedByGroupKeyFavoriteFriends = function () {
const groupedByGroupKeyFavoriteFriends = {};
this.favoriteFriends.forEach((friend) => {
if (friend.groupKey) {
if (!groupedByGroupKeyFavoriteFriends[friend.groupKey]) {
groupedByGroupKeyFavoriteFriends[friend.groupKey] = [];
}
groupedByGroupKeyFavoriteFriends[friend.groupKey].push(friend);
}
});
return groupedByGroupKeyFavoriteFriends;
};
$app.computed.favoriteWorlds = function () {
if (this.sortFavoriteWorlds) {
this.sortFavoriteWorlds = false;
@@ -7212,6 +7227,21 @@ console.log(`isLinux: ${LINUX}`);
return this.favoriteWorldsSorted;
};
$app.computed.groupedByGroupKeyFavoriteWorlds = function () {
const groupedByGroupKeyFavoriteWorlds = {};
this.favoriteWorlds.forEach((world) => {
if (world.groupKey) {
if (!groupedByGroupKeyFavoriteWorlds[world.groupKey]) {
groupedByGroupKeyFavoriteWorlds[world.groupKey] = [];
}
groupedByGroupKeyFavoriteWorlds[world.groupKey].push(world);
}
});
return groupedByGroupKeyFavoriteWorlds;
};
$app.computed.favoriteAvatars = function () {
if (this.sortFavoriteAvatars) {
this.sortFavoriteAvatars = false;
@@ -7223,6 +7253,20 @@ console.log(`isLinux: ${LINUX}`);
return this.favoriteAvatarsSorted;
};
$app.computed.groupedByGroupKeyFavoriteAvatars = function () {
const groupedByGroupKeyFavoriteAvatars = {};
this.favoriteAvatars.forEach((avatar) => {
if (avatar.groupKey) {
if (!groupedByGroupKeyFavoriteAvatars[avatar.groupKey]) {
groupedByGroupKeyFavoriteAvatars[avatar.groupKey] = [];
}
groupedByGroupKeyFavoriteAvatars[avatar.groupKey].push(avatar);
}
});
return groupedByGroupKeyFavoriteAvatars;
};
// #endregion
// #region | App: friendLog
@@ -23345,6 +23389,27 @@ console.log(`isLinux: ${LINUX}`);
return friendsArr[0].ref?.location;
};
// favorites Tab
// - local favorites
// - local world & avatar
$app.data.localFavoriteShowDelayedContent = [false, false];
$app.methods.onFavTabClick = function (el) {
if (el.index === '0') {
this.localFavoriteShowDelayedContent = [false, false];
} else {
setTimeout(() => {
requestAnimationFrame(() => {
if (el.index === '1') {
this.localFavoriteShowDelayedContent = [true, false];
} else if (el.index === '2') {
this.localFavoriteShowDelayedContent = [false, true];
}
});
}, 300);
}
};
// #endregion
// #region | Electron

227
src/mixins/tabs/favorites.pug
View File

@@ -1,5 +1,5 @@
mixin favoritesTab
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === \'favorite\'')
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === "favorite"')
div(style='font-size: 13px; position: absolute; display: flex; 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') }}
@@ -16,23 +16,23 @@ mixin favoritesTab
size='small'
icon='el-icon-refresh'
circle)
el-tabs(ref='favoriteTabRef' type='card' v-loading='API.isFavoriteLoading' style='height: 100%')
el-tab-pane(:label='$t("view.favorite.friends.header")')
el-collapse(
v-if='$refs.menu && $refs.menu.activeIndex === "favorite" && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === "0"'
style='border: 0')
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showFriendExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showFriendImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(v-model='sortFavorites' @change='saveSortFavoritesOption')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
el-tabs(type='card' v-loading='API.isFavoriteLoading' style='height: 100%' @tab-click='onFavTabClick')
el-tab-pane(:label='$t("view.favorite.friends.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showFriendExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showFriendImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(v-model='sortFavorites' @change='saveSortFavoritesOption')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
el-collapse(style='border: 0')
el-collapse-item(v-for='group in API.favoriteFriendGroups' :key='group.name')
template(slot='title')
span(v-text='group.displayName' style='font-weight: bold; font-size: 14px; margin-left: 10px')
span(
v-text='group.displayName'
style='font-weight: bold; font-size: 14px; margin-left: 10px')
span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ group.count }}/{{ group.capacity }}
el-tooltip(
placement='top'
@@ -57,8 +57,7 @@ mixin favoritesTab
.x-friend-list(v-if='group.count' style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in favoriteFriends'
v-if='favorite.groupKey === group.key'
v-for='favorite in groupedByGroupKeyFavoriteFriends[group.key]'
:key='favorite.id'
@click='showUserDialog(favorite.id)')
.x-friend-item
@@ -129,51 +128,48 @@ mixin favoritesTab
style='margin-left: 5px')
div(
v-else
style='height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
el-tab-pane(:label='$t("view.favorite.worlds.header")')
el-collapse(
v-if='$refs.menu && $refs.menu.activeIndex === "favorite" && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === "1"'
style='border: 0')
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showWorldExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showWorldImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(
v-model='sortFavorites'
@change='saveSortFavoritesOption'
style='margin-right: 12px')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
el-input(
v-model='worldFavoriteSearch'
@input='searchWorldFavorites'
clearable
size='mini'
:placeholder='$t("view.favorite.worlds.search")'
style='width: 200px')
.x-friend-list(style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in worldFavoriteSearchResults'
:key='favorite.id'
@click='showWorldDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.name')
.avatar
img(v-lazy='favorite.thumbnailImageUrl')
.detail
span.name(v-text='favorite.name')
span.extra(v-if='favorite.occupants') {{ favorite.authorName }} ({{ favorite.occupants }})
span.extra(v-else v-text='favorite.authorName')
template(v-else)
.avatar
.detail
span(v-text='favorite.id')
el-tab-pane(:label='$t("view.favorite.worlds.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showWorldExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showWorldImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(
v-model='sortFavorites'
@change='saveSortFavoritesOption'
style='margin-right: 12px')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
el-input(
v-model='worldFavoriteSearch'
@input='searchWorldFavorites'
clearable
size='mini'
:placeholder='$t("view.favorite.worlds.search")'
style='width: 200px')
.x-friend-list(style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in worldFavoriteSearchResults'
:key='favorite.id'
@click='showWorldDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.name')
.avatar
img(v-lazy='favorite.thumbnailImageUrl')
.detail
span.name(v-text='favorite.name')
span.extra(v-if='favorite.occupants') {{ favorite.authorName }} ({{ favorite.occupants }})
span.extra(v-else v-text='favorite.authorName')
template(v-else)
.avatar
.detail
span(v-text='favorite.id')
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.worlds.vrchat_favorites') }}
el-collapse(style='border: 0')
el-collapse-item(v-for='group in API.favoriteWorldGroups' :key='group.name')
template(slot='title')
div(style='display: flex; align-items: center')
@@ -227,8 +223,7 @@ mixin favoritesTab
.x-friend-list(v-if='group.count' style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in favoriteWorlds'
v-if='favorite.groupKey === group.key'
v-for='favorite in groupedByGroupKeyFavoriteWorlds[group.key]'
:key='favorite.id'
@click='showWorldDialog(favorite.id)')
.x-friend-item
@@ -318,7 +313,7 @@ mixin favoritesTab
style='margin-left: 5px')
div(
v-else
style='height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.worlds.local_favorites') }}
br
@@ -358,7 +353,9 @@ mixin favoritesTab
icon='el-icon-delete'
circle
style='margin-left: 5px')
.x-friend-list(style='margin-top: 10px' v-if='localWorldFavorites[group].length')
.x-friend-list(
style='margin-top: 10px'
v-if='localFavoriteShowDelayedContent[0] && localWorldFavorites[group].length')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in localWorldFavorites[group]'
@@ -433,53 +430,52 @@ mixin favoritesTab
style='margin-left: 5px')
div(
v-else
style='height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
el-tab-pane(:label='$t("view.favorite.avatars.header")')
el-collapse(
v-if='$refs.menu && $refs.menu.activeIndex === "favorite" && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === "2"'
style='border: 0')
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showAvatarExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showAvatarImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(
v-model='sortFavorites'
@change='saveSortFavoritesOption'
style='margin-right: 12px')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
el-input(
v-model='avatarFavoriteSearch'
@input='searchAvatarFavorites'
clearable
size='mini'
:placeholder='$t("view.favorite.avatars.search")'
style='width: 200px')
.x-friend-list(style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in avatarFavoriteSearchResults'
:key='favorite.id'
@click='showAvatarDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.name')
.avatar
img(v-lazy='favorite.thumbnailImageUrl')
.detail
span.name(v-text='favorite.name')
span.extra(v-text='favorite.authorName')
template(v-else)
.avatar
.detail
span.name(v-text='favorite.id')
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.vrchat_favorites') }}
el-tab-pane(:label='$t("view.favorite.avatars.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showAvatarExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showAvatarImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(
v-model='sortFavorites'
@change='saveSortFavoritesOption'
style='margin-right: 12px')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
el-input(
v-model='avatarFavoriteSearch'
@input='searchAvatarFavorites'
clearable
size='mini'
:placeholder='$t("view.favorite.avatars.search")'
style='width: 200px')
.x-friend-list(style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in avatarFavoriteSearchResults'
:key='favorite.id'
@click='showAvatarDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.name')
.avatar
img(v-lazy='favorite.thumbnailImageUrl')
.detail
span.name(v-text='favorite.name')
span.extra(v-text='favorite.authorName')
template(v-else)
.avatar
.detail
span.name(v-text='favorite.id')
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.vrchat_favorites') }}
el-collapse(style='border: 0')
el-collapse-item(v-for='group in API.favoriteAvatarGroups' :key='group.name')
template(slot='title')
span(v-text='group.displayName' style='font-weight: bold; font-size: 14px; margin-left: 10px')
span(
v-text='group.displayName'
style='font-weight: bold; font-size: 14px; margin-left: 10px')
span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ group.count }}/{{ group.capacity }}
el-tooltip(
placement='top'
@@ -504,8 +500,7 @@ mixin favoritesTab
.x-friend-list(v-if='group.count' style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in favoriteAvatars'
v-if='favorite.groupKey === group.key'
v-for='favorite in groupedByGroupKeyFavoriteAvatars[group.key]'
:key='favorite.id'
@click='showAvatarDialog(favorite.id)')
.x-friend-item
@@ -591,7 +586,7 @@ mixin favoritesTab
style='margin-left: 5px')
div(
v-else
style='height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
el-collapse-item
template(slot='title')
@@ -647,7 +642,7 @@ mixin favoritesTab
style='margin-left: 5px')
div(
v-else
style='height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.local_favorites') }}
br
@@ -690,7 +685,9 @@ mixin favoritesTab
icon='el-icon-delete'
circle
style='margin-left: 5px')
.x-friend-list(style='margin-top: 10px' v-if='localAvatarFavorites[group].length')
.x-friend-list(
style='margin-top: 10px'
v-if='localFavoriteShowDelayedContent[1] && localAvatarFavorites[group].length')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in localAvatarFavorites[group]'
@@ -765,5 +762,5 @@ mixin favoritesTab
style='margin-left: 5px')
div(
v-else
style='height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data