From 7b586bbd5edb5b4f5fa6bcd326d3aaf96f187c5f Mon Sep 17 00:00:00 2001
From: KittenTM <aidenplayzroblox123@gmail.com>
Date: Sun, 22 Mar 2026 16:51:18 +0100
Subject: [PATCH] Ranking: dont display content until finished loading

---
 ranking/index.html |  4 ++--
 ranking/rank.js    | 51 ++++++++++++++++++++++++++++------------------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/ranking/index.html b/ranking/index.html
index d671377..2a3bf38 100644
--- a/ranking/index.html
+++ b/ranking/index.html
@@ -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>
diff --git a/ranking/rank.js b/ranking/rank.js
index a5a481c..34b587a 100644
--- a/ranking/rank.js
+++ b/ranking/rank.js
@@ -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 => {