Agent displayed data makes more sense and fixed load screen

2026-06-18 00:07:47 -04:00
parent ee204dde46
commit 4ec6c84b4c
4 changed files with 146 additions and 12 deletions
@@ -116,3 +116,112 @@ a, .btn-link {
    border-color: var(--border);
    color: var(--text-secondary);
 }
+
+/* ── Loading Screen ── */
+.loading-screen {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: radial-gradient(ellipse at center, #141428 0%, #0b0b1a 100%);
+    gap: 0.75rem;
+    z-index: 9999;
+}
+
+.loading-content {
+    position: relative;
+    width: 5rem;
+    height: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+}
+
+.loading-ring {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+    position: absolute;
+}
+
+.ring-track {
+    fill: none;
+    stroke: var(--border);
+    stroke-width: 5;
+}
+
+.ring-fill {
+    fill: none;
+    stroke: var(--accent);
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-dasharray: 263.9;
+    stroke-dashoffset: calc(263.9 - (263.9 * var(--blazor-load-percentage, 0%)) / 100);
+    transition: stroke-dashoffset 0.2s ease;
+    filter: drop-shadow(0 0 6px var(--accent-glow));
+}
+
+.loading-icon {
+    font-size: 1.5rem;
+    color: var(--accent);
+    animation: loading-pulse 1.5s ease-in-out infinite;
+    z-index: 1;
+}
+
+@keyframes loading-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.7; }
+    50% { transform: scale(1.15); opacity: 1; }
+}
+
+.loading-title {
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin: 0;
+    letter-spacing: -0.02em;
+    background: linear-gradient(135deg, #e8e8f0 0%, #6c63ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.loading-subtitle {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin: 0;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+}
+
+.loading-bar {
+    width: 12rem;
+    margin-top: 0.5rem;
+}
+
+.loading-bar-track {
+    width: 100%;
+    height: 3px;
+    background: var(--border);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.loading-bar-fill {
+    height: 100%;
+    width: calc(var(--blazor-load-percentage, 0%));
+    background: linear-gradient(90deg, var(--accent), #8b83ff);
+    border-radius: 2px;
+    transition: width 0.2s ease;
+}
+
+.loading-status {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.loading-status::after {
+    content: var(--blazor-load-percentage-text, "Loading...");
+}
@@ -21,11 +21,23 @@

 <body>
 <div id="app">
-    <svg class="loading-progress">
-        <circle cx="50%" cy="50%" r="40%"/>
-        <circle cx="50%" cy="50%" r="40%"/>
-    </svg>
-    <div class="loading-progress-text"></div>
+    <div class="loading-screen">
+        <div class="loading-content">
+            <svg class="loading-ring" viewBox="0 0 100 100">
+                <circle class="ring-track" cx="50" cy="50" r="42"/>
+                <circle class="ring-fill" cx="50" cy="50" r="42"/>
+            </svg>
+            <div class="loading-icon">✦</div>
+        </div>
+        <h1 class="loading-title">Chrono CCG</h1>
+        <p class="loading-subtitle">Card Gallery</p>
+        <div class="loading-bar">
+            <div class="loading-bar-track">
+                <div class="loading-bar-fill"></div>
+            </div>
+        </div>
+        <p class="loading-status"></p>
+    </div>
 </div>

 <div id="blazor-error-ui">