Ranking: dont display content until finished loading

This commit is contained in:
kittentm 2026-03-22 16:51:18 +01:00
commit 7b586bbd5e
No known key found for this signature in database
GPG key ID: AC43DFDBC1F44A91
2 changed files with 33 additions and 22 deletions

View file

@ -34,7 +34,7 @@
</div>
</div>
<div class="mode-selection">
<div class="mode-selection" style="display: none;">
<a href="?mode=regular" class="mode-button" id="link-regular">
<img id="img-regular" src="../assets/en/svg/ui/btn_tab_regular-40682de5f47922c608c0ddf6eddd44efcf4b0516092041cdb48977f777030487.svg" alt="Turf War">
</a>
@ -46,7 +46,7 @@
</a>
</div>
<div class="rank-glass-panel">
<div class="rank-glass-panel" style="display: none;">
<div class="rank-header-area">
<img id="rank-mode-title" src="/assets/en/svg/text/scene/rank/tx_splatfest-7a0ef00ee7f4877df0c7b32998f6bad81fd3f8c28e287168dfffe7d6efb09f77.svg" class="splatfest-title-svg">
<div class="splatfest-subtitle">Rice VS Bread</div>

View file

@ -203,6 +203,12 @@ window.loadHeader(async function(headerContainer) {
const modeTitleImg = document.getElementById('rank-mode-title');
const splatfestSubtitle = document.querySelector('.splatfest-subtitle');
const modeSelection = document.querySelector('.mode-selection');
const glassPanel = document.querySelector('.rank-glass-panel');
if (modeSelection) modeSelection.style.display = 'flex';
if (glassPanel) glassPanel.style.display = 'block';
const images = {
regular: "../assets/en/svg/ui/btn_tab_regular_selected-b636e3d21ace9434120061a32658b21a34feb6468553b6d6da30ce890b85ec1f.svg",
gachi: "../assets/en/svg/ui/btn_tab_gachi_selected-4796f167399dca12cb274dcb0348cdf709a1f722ddd241210e55a3e04fdb6ff4.svg",
@ -230,30 +236,35 @@ window.loadHeader(async function(headerContainer) {
renderRankings(mode);
};
const init = () => {
const init = async () => {
const cachedUser = sessionStorage.getItem('user_cache');
if (cachedUser) renderData(JSON.parse(cachedUser));
fetch("/api/v1/me", { credentials: 'include' })
.then(res => res.ok ? res.json() : Promise.reject(res))
.then(data => {
if (!data) return;
sessionStorage.setItem('user_cache', JSON.stringify(data));
renderData(data);
}).catch(() => {});
try {
await Promise.all([
fetch("/api/v1/me", { credentials: 'include' })
.then(res => res.ok ? res.json() : Promise.reject(res))
.then(data => {
if (!data) return;
sessionStorage.setItem('user_cache', JSON.stringify(data));
renderData(data);
}).catch(() => {}),
fetch("/api/v1/leaderboard")
.then(res => res.json())
.then(data => {
cachedLeaderboardData = data;
const urlParams = new URLSearchParams(window.location.search);
const mode = urlParams.get('mode') || 'regular';
updateTabUI(mode);
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) loadingOverlay.style.display = "none";
})
.catch(err => console.error("Leaderboard preload failed:", err));
fetch("/api/v1/leaderboard")
.then(res => res.json())
.then(data => {
cachedLeaderboardData = data;
const urlParams = new URLSearchParams(window.location.search);
const mode = urlParams.get('mode') || 'regular';
updateTabUI(mode);
})
]);
} catch (err) {
console.error("Initialization failed:", err);
} finally {
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) loadingOverlay.style.display = "none";
}
};
document.querySelectorAll('.mode-selection a').forEach(link => {