From 7294ad409cc61ccc0be7c3db37e2d7c838876132 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 11:30:07 +0000 Subject: [PATCH] feat(spa): add non-blocking host/player loading skeletons --- lobby/templates/lobby/host_screen.html | 38 ++++++++++++++++++++++-- lobby/templates/lobby/player_screen.html | 33 ++++++++++++++++++-- 2 files changed, 66 insertions(+), 5 deletions(-) diff --git a/lobby/templates/lobby/host_screen.html b/lobby/templates/lobby/host_screen.html index 8af0a39..49f9d01 100644 --- a/lobby/templates/lobby/host_screen.html +++ b/lobby/templates/lobby/host_screen.html @@ -1,5 +1,16 @@ -WPP Host +WPP Host + +

Host panel (MVP)

Kræver login som host-bruger.

@@ -32,6 +43,18 @@ +
+

Indlæser host-overblik…

+
+
+
+
+ 
Klar.
diff --git a/lobby/templates/lobby/player_screen.html b/lobby/templates/lobby/player_screen.html index 7d8fddf..8df3610 100644 --- a/lobby/templates/lobby/player_screen.html +++ b/lobby/templates/lobby/player_screen.html @@ -17,6 +17,14 @@ #playerShellErrorBoundary button[disabled] { opacity: 0.55; cursor: not-allowed; } #lieStatus.locked { color: #0a5f2d; font-weight: 600; } #guessStatus.locked { color: #0a5f2d; font-weight: 600; } +.critical-card { margin: 10px 0 12px; padding: 10px; border-radius: 10px; border: 1px solid #cbd5e1; background: #f8fafc; } +.critical-card h2 { margin: 0 0 6px; font-size: 1rem; } +.critical-card p { margin: 0; color: #334155; } +.skeleton-line { position: relative; overflow: hidden; height: 12px; border-radius: 999px; margin-top: 8px; background: #e2e8f0; } +.skeleton-line:first-of-type { margin-top: 4px; } +.skeleton-line.short { width: 60%; } +.skeleton-line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(226,232,240,0) 0%, rgba(255,255,255,0.85) 45%, rgba(226,232,240,0) 100%); animation: wppShimmer 1.2s infinite; } +@keyframes wppShimmer { to { transform: translateX(100%); } } @@ -49,6 +57,18 @@ +
+

Indlæser spiller-overblik…

+
+
+
+
+ 
Klar.