MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 14:56:06 +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
src/app.js
+65
View File
@@ -7201,6 +7201,21 @@ console.log(`isLinux: ${LINUX}`);
return this.favoriteFriendsSorted; 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 () { $app.computed.favoriteWorlds = function () {
if (this.sortFavoriteWorlds) { if (this.sortFavoriteWorlds) {
this.sortFavoriteWorlds = false; this.sortFavoriteWorlds = false;
@@ -7212,6 +7227,21 @@ console.log(`isLinux: ${LINUX}`);
return this.favoriteWorldsSorted; 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 () { $app.computed.favoriteAvatars = function () {
if (this.sortFavoriteAvatars) { if (this.sortFavoriteAvatars) {
this.sortFavoriteAvatars = false; this.sortFavoriteAvatars = false;
@@ -7223,6 +7253,20 @@ console.log(`isLinux: ${LINUX}`);
return this.favoriteAvatarsSorted; 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 // #endregion
// #region | App: friendLog // #region | App: friendLog
@@ -23345,6 +23389,27 @@ console.log(`isLinux: ${LINUX}`);
return friendsArr[0].ref?.location; 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 // #endregion
// #region | Electron // #region | Electron
src/mixins/tabs/favorites.pug
+29 -32
View File
@@ -1,5 +1,5 @@
mixin favoritesTab 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(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') div(v-if='editFavoritesMode' style='display: inline-block; margin-right: 10px')
el-button(size='small' @click='clearBulkFavoriteSelection') {{ $t('view.favorite.clear') }} el-button(size='small' @click='clearBulkFavoriteSelection') {{ $t('view.favorite.clear') }}
@@ -16,11 +16,8 @@ mixin favoritesTab
size='small' size='small'
icon='el-icon-refresh' icon='el-icon-refresh'
circle) circle)
el-tabs(ref='favoriteTabRef' type='card' v-loading='API.isFavoriteLoading' style='height: 100%') el-tabs(type='card' v-loading='API.isFavoriteLoading' style='height: 100%' @tab-click='onFavTabClick')
el-tab-pane(:label='$t("view.favorite.friends.header")') el-tab-pane(:label='$t("view.favorite.friends.header")' lazy)
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(style='display: flex; align-items: center; justify-content: space-between')
div div
el-button(size='small' @click='showFriendExportDialog') {{ $t('view.favorite.export') }} el-button(size='small' @click='showFriendExportDialog') {{ $t('view.favorite.export') }}
@@ -30,9 +27,12 @@ mixin favoritesTab
el-radio-group(v-model='sortFavorites' @change='saveSortFavoritesOption') el-radio-group(v-model='sortFavorites' @change='saveSortFavoritesOption')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }} 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-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') el-collapse-item(v-for='group in API.favoriteFriendGroups' :key='group.name')
template(slot='title') 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 }} span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ group.count }}/{{ group.capacity }}
el-tooltip( el-tooltip(
placement='top' placement='top'
@@ -57,8 +57,7 @@ mixin favoritesTab
.x-friend-list(v-if='group.count' style='margin-top: 10px') .x-friend-list(v-if='group.count' style='margin-top: 10px')
div( div(
style='display: inline-block; width: 300px; margin-right: 15px' style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in favoriteFriends' v-for='favorite in groupedByGroupKeyFavoriteFriends[group.key]'
v-if='favorite.groupKey === group.key'
:key='favorite.id' :key='favorite.id'
@click='showUserDialog(favorite.id)') @click='showUserDialog(favorite.id)')
.x-friend-item .x-friend-item
@@ -129,12 +128,9 @@ mixin favoritesTab
style='margin-left: 5px') style='margin-left: 5px')
div( div(
v-else 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 No Data
el-tab-pane(:label='$t("view.favorite.worlds.header")') el-tab-pane(:label='$t("view.favorite.worlds.header")' lazy)
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(style='display: flex; align-items: center; justify-content: space-between')
div div
el-button(size='small' @click='showWorldExportDialog') {{ $t('view.favorite.export') }} el-button(size='small' @click='showWorldExportDialog') {{ $t('view.favorite.export') }}
@@ -172,8 +168,8 @@ mixin favoritesTab
.avatar .avatar
.detail .detail
span(v-text='favorite.id') span(v-text='favorite.id')
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.worlds.vrchat_favorites') }} 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') el-collapse-item(v-for='group in API.favoriteWorldGroups' :key='group.name')
template(slot='title') template(slot='title')
div(style='display: flex; align-items: center') div(style='display: flex; align-items: center')
@@ -227,8 +223,7 @@ mixin favoritesTab
.x-friend-list(v-if='group.count' style='margin-top: 10px') .x-friend-list(v-if='group.count' style='margin-top: 10px')
div( div(
style='display: inline-block; width: 300px; margin-right: 15px' style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in favoriteWorlds' v-for='favorite in groupedByGroupKeyFavoriteWorlds[group.key]'
v-if='favorite.groupKey === group.key'
:key='favorite.id' :key='favorite.id'
@click='showWorldDialog(favorite.id)') @click='showWorldDialog(favorite.id)')
.x-friend-item .x-friend-item
@@ -318,7 +313,7 @@ mixin favoritesTab
style='margin-left: 5px') style='margin-left: 5px')
div( div(
v-else 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 No Data
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.worlds.local_favorites') }} span(style='display: block; margin-top: 20px') {{ $t('view.favorite.worlds.local_favorites') }}
br br
@@ -358,7 +353,9 @@ mixin favoritesTab
icon='el-icon-delete' icon='el-icon-delete'
circle circle
style='margin-left: 5px') 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( div(
style='display: inline-block; width: 300px; margin-right: 15px' style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in localWorldFavorites[group]' v-for='favorite in localWorldFavorites[group]'
@@ -433,12 +430,9 @@ mixin favoritesTab
style='margin-left: 5px') style='margin-left: 5px')
div( div(
v-else 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 No Data
el-tab-pane(:label='$t("view.favorite.avatars.header")') el-tab-pane(:label='$t("view.favorite.avatars.header")' lazy)
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(style='display: flex; align-items: center; justify-content: space-between')
div div
el-button(size='small' @click='showAvatarExportDialog') {{ $t('view.favorite.export') }} el-button(size='small' @click='showAvatarExportDialog') {{ $t('view.favorite.export') }}
@@ -475,11 +469,13 @@ mixin favoritesTab
.avatar .avatar
.detail .detail
span.name(v-text='favorite.id') span.name(v-text='favorite.id')
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.vrchat_favorites') }} 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') el-collapse-item(v-for='group in API.favoriteAvatarGroups' :key='group.name')
template(slot='title') 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 }} span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ group.count }}/{{ group.capacity }}
el-tooltip( el-tooltip(
placement='top' placement='top'
@@ -504,8 +500,7 @@ mixin favoritesTab
.x-friend-list(v-if='group.count' style='margin-top: 10px') .x-friend-list(v-if='group.count' style='margin-top: 10px')
div( div(
style='display: inline-block; width: 300px; margin-right: 15px' style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in favoriteAvatars' v-for='favorite in groupedByGroupKeyFavoriteAvatars[group.key]'
v-if='favorite.groupKey === group.key'
:key='favorite.id' :key='favorite.id'
@click='showAvatarDialog(favorite.id)') @click='showAvatarDialog(favorite.id)')
.x-friend-item .x-friend-item
@@ -591,7 +586,7 @@ mixin favoritesTab
style='margin-left: 5px') style='margin-left: 5px')
div( div(
v-else 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 No Data
el-collapse-item el-collapse-item
template(slot='title') template(slot='title')
@@ -647,7 +642,7 @@ mixin favoritesTab
style='margin-left: 5px') style='margin-left: 5px')
div( div(
v-else 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 No Data
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.local_favorites') }} span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.local_favorites') }}
br br
@@ -690,7 +685,9 @@ mixin favoritesTab
icon='el-icon-delete' icon='el-icon-delete'
circle circle
style='margin-left: 5px') 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( div(
style='display: inline-block; width: 300px; margin-right: 15px' style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in localAvatarFavorites[group]' v-for='favorite in localAvatarFavorites[group]'
@@ -765,5 +762,5 @@ mixin favoritesTab
style='margin-left: 5px') style='margin-left: 5px')
div( div(
v-else 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 No Data