Merge pull request #146 from medievalshell/Dev

feat(loading): redesigned loader with progress bar, task labels, configurable assets + perf(build): granular code-split + preconnect hint for cold-load speed + docs: PERFORMANCE.md — client + server recipe for the 4s cold load
This commit is contained in:
DuckieTM
2026-05-21 07:39:32 +02:00
committed by GitHub
10 changed files with 889 additions and 51 deletions
+4 -1
View File
@@ -57,7 +57,10 @@
const renderShell = () => {
const root = document.getElementById("root");
if(!root || root.firstChild) return;
root.innerHTML = '<div style="position:fixed;inset:0;background:linear-gradient(180deg,#6eadc8 0%,#78b7cf 45%,#8ec4d7 100%);overflow:hidden;z-index:1"><div style="position:absolute;left:0;top:0;width:220px;height:220px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0));clip-path:polygon(0 0,100% 0,0 100%)"></div><div style="position:absolute;right:0;bottom:0;width:32vw;max-width:420px;height:100%;background:linear-gradient(270deg,rgba(255,255,255,.16),rgba(255,255,255,0))"></div><div style="position:absolute;top:50%;right:8vw;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;width:260px"><div style="height:86px;background:#a2bfd1;border:2px solid #3f6a85;border-radius:8px;box-shadow:inset 0 2px rgba(255,255,255,.35),0 4px 6px rgba(0,0,0,.25)"></div><div style="height:190px;background:#a2bfd1;border:2px solid #3f6a85;border-radius:8px;box-shadow:inset 0 2px rgba(255,255,255,.35),0 4px 6px rgba(0,0,0,.25)"></div></div></div>';
// Match the React LoadingView background so the pre-React shell paints
// the same gradient — no light-blue login-skeleton flash before the
// loader takes over.
root.innerHTML = '<div style="position:fixed;inset:0;background:radial-gradient(#1d1a24,#003a6b);overflow:hidden;z-index:1"></div>';
};
const decodeAsset = (bytes) => {
@@ -48,6 +48,26 @@
"timezone.settings": "Europe/Amsterdam",
"youtube.publish.disabled": false,
"user.badges.group.slot.enabled": true,
"_comment_loading_screen": "Schermata di caricamento — sostituibili per traduzione/branding. Logo, sfondo e colore della barra usano lo standard CSS (URL, gradient, colore esadecimale). Le label compaiono sotto la barra di progresso man mano che ogni fase del boot completa.",
"loading.logo.url": "",
"loading.background": "",
"loading.progress.color": "linear-gradient(90deg,#4f8cff,#2563eb)",
"loading.task.boot": "Avvio in corso...",
"loading.task.session": "Verifica sessione",
"loading.task.renderer": "Inizializzazione renderer",
"loading.task.warmup": "Caricamento contenuti...",
"loading.task.assets": "Sto caricando gli asset di gioco",
"loading.task.localization": "Sto caricando le traduzioni",
"loading.task.avatar": "Sto caricando il guardaroba",
"loading.task.sounds": "Sto caricando i suoni",
"loading.task.startsession": "Avvio sessione",
"loading.task.userdata": "Caricamento dati utente",
"loading.task.rooms": "Caricamento stanze",
"loading.task.engine": "Caricamento engine grafico",
"loading.task.connect": "Connessione al server",
"loading.task.ready": "Pronto!",
"login.screen.enabled": true,
"login.endpoint": "${api.url}/api/auth/login",
"login.register.endpoint": "${api.url}/api/auth/register",