Refresh history loading UI and gate incomplete MGM series

frontend/components/dashboard/Dashboard.module.css

@@ -2244,37 +2244,202 @@
   min-height: 420px;
 }
 
-.root :global(.history-modal .history-loading-card) {
+.root :global(.history-modal .history-fetch-loading) {
-  min-width: min(100%, 420px);
+  display: flex;
-  padding: 22px 26px;
+  flex-direction: column;
-  gap: 16px;
+  align-items: center;
-  border-radius: 22px;
+  gap: 18px;
+  width: min(100%, 420px);
+  padding: 24px 26px;
+  border-radius: 24px;
+  border: 1px solid rgba(96, 165, 250, 0.16);
+  background:
+    linear-gradient(
+      180deg,
+      rgba(10, 18, 36, 0.72) 0%,
+      rgba(8, 14, 30, 0.5) 100%
+    );
+  box-shadow:
+    0 18px 48px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
-.root :global(.history-modal .history-loading-card .loading-clouds),
+.root :global(.history-modal .history-fetch-scan) {
-.root :global(.history-modal .history-loading-card .loading-windfield) {
+  position: relative;
-  width: 180px;
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0.02) 62%, transparent 100%);
 }
 
-.root :global(.history-modal .history-loading-radar) {
+.root :global(.history-modal .history-fetch-ring) {
-  width: 86px;
+  position: absolute;
-  height: 86px;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid rgba(56, 189, 248, 0.16);
 }
 
-.root :global(.history-modal .history-loading-thermals) {
+.root :global(.history-modal .history-fetch-ring-1) {
+  transform: scale(0.7);
+}
+
+.root :global(.history-modal .history-fetch-ring-2) {
+  transform: scale(0.92);
+}
+
+.root :global(.history-modal .history-fetch-sweep) {
+  position: absolute;
+  inset: 5px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 120deg,
+    rgba(34, 211, 238, 0) 0deg,
+    rgba(34, 211, 238, 0.04) 220deg,
+    rgba(56, 189, 248, 0.78) 300deg,
+    rgba(253, 224, 71, 0.32) 332deg,
+    rgba(34, 211, 238, 0) 360deg
+  );
+  animation: history-fetch-spin 2.2s linear infinite;
+}
+
+.root :global(.history-modal .history-fetch-core) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(103, 232, 249, 0.95);
+  box-shadow: 0 0 18px rgba(34, 211, 238, 0.42);
+}
+
+.root :global(.history-modal .history-fetch-bars) {
+  display: flex;
+  align-items: end;
+  gap: 7px;
   height: 22px;
-  gap: 6px;
 }
 
-.root :global(.history-modal .history-loading-copy strong) {
+.root :global(.history-modal .history-fetch-bar) {
+  width: 8px;
+  border-radius: 999px;
+  background: linear-gradient(
+    180deg,
+    rgba(250, 204, 21, 0.18) 0%,
+    rgba(251, 146, 60, 0.9) 100%
+  );
+  animation: history-fetch-pulse 1.6s ease-in-out infinite;
+}
+
+.root :global(.history-modal .history-fetch-bar-1) {
+  height: 10px;
+}
+
+.root :global(.history-modal .history-fetch-bar-2) {
+  height: 18px;
+  animation-delay: 0.18s;
+}
+
+.root :global(.history-modal .history-fetch-bar-3) {
+  height: 14px;
+  animation-delay: 0.34s;
+}
+
+.root :global(.history-modal .history-fetch-bar-4) {
+  height: 20px;
+  animation-delay: 0.5s;
+}
+
+.root :global(.history-modal .history-fetch-lines) {
+  position: relative;
+  width: 180px;
+  height: 22px;
+  overflow: hidden;
+}
+
+.root :global(.history-modal .history-fetch-line) {
+  position: absolute;
+  left: -26%;
+  height: 1px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    rgba(34, 211, 238, 0) 0%,
+    rgba(125, 211, 252, 0.72) 48%,
+    rgba(34, 211, 238, 0) 100%
+  );
+  animation: history-fetch-flow 2.4s linear infinite;
+}
+
+.root :global(.history-modal .history-fetch-line-1) {
+  top: 4px;
+  width: 122px;
+}
+
+.root :global(.history-modal .history-fetch-line-2) {
+  top: 11px;
+  width: 168px;
+  animation-delay: -0.8s;
+}
+
+.root :global(.history-modal .history-fetch-line-3) {
+  top: 18px;
+  width: 138px;
+  animation-delay: -1.4s;
+}
+
+.root :global(.history-modal .history-fetch-copy) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.root :global(.history-modal .history-fetch-copy strong) {
   font-size: 12px;
-  letter-spacing: 0.18em;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: rgba(103, 232, 249, 0.94);
 }
 
-.root :global(.history-modal .history-loading-copy span) {
+.root :global(.history-modal .history-fetch-copy span) {
   max-width: 300px;
   font-size: 12px;
   line-height: 1.5;
+  color: rgba(203, 213, 225, 0.82);
+}
+
+@keyframes history-fetch-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes history-fetch-pulse {
+  0%,
+  100% {
+    transform: scaleY(0.86);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scaleY(1.08);
+    opacity: 1;
+  }
+}
+
+@keyframes history-fetch-flow {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(150%);
+  }
 }
 
 .root :global(.history-modal .history-peak-reference) {
@@ -2359,6 +2524,10 @@
     min-height: 340px;
   }
 
+  .root :global(.history-modal .history-fetch-loading) {
+    width: min(100%, 360px);
+  }
+
   .root :global(.history-modal .history-peak-reference-scroll) {
     max-height: 320px;
   }
@@ -2408,18 +2577,16 @@
     min-height: 280px;
   }
 
-  .root :global(.history-modal .history-loading-card) {
+  .root :global(.history-modal .history-fetch-loading) {
     width: 100%;
-    min-width: 0;
     padding: 18px 16px;
   }
 
-  .root :global(.history-modal .history-loading-card .loading-clouds),
+  .root :global(.history-modal .history-fetch-lines) {
-  .root :global(.history-modal .history-loading-card .loading-windfield) {
     width: 150px;
   }
 
-  .root :global(.history-modal .history-loading-radar) {
+  .root :global(.history-modal .history-fetch-scan) {
     width: 72px;
     height: 72px;
   }

frontend/components/dashboard/HistoryModal.tsx

@@ -263,31 +263,25 @@ export function HistoryModal() {
             )}
             {isLoading ? (
               <div className="history-modal-loading">
-                <div className="loading-card history-loading-card">
+                <div className="history-fetch-loading">
-                  <div className="loading-clouds" aria-hidden="true">
+                  <div className="history-fetch-scan" aria-hidden="true">
-                    <span className="loading-cloud loading-cloud-1" />
+                    <span className="history-fetch-ring history-fetch-ring-1" />
-                    <span className="loading-cloud loading-cloud-2" />
+                    <span className="history-fetch-ring history-fetch-ring-2" />
+                    <span className="history-fetch-sweep" />
+                    <span className="history-fetch-core" />
                   </div>
-                  <div className="loading-windfield" aria-hidden="true">
+                  <div className="history-fetch-bars" aria-hidden="true">
-                    <span className="loading-windline loading-windline-1" />
+                    <span className="history-fetch-bar history-fetch-bar-1" />
-                    <span className="loading-windline loading-windline-2" />
+                    <span className="history-fetch-bar history-fetch-bar-2" />
-                    <span className="loading-windline loading-windline-3" />
+                    <span className="history-fetch-bar history-fetch-bar-3" />
+                    <span className="history-fetch-bar history-fetch-bar-4" />
                   </div>
-                  <div className="loading-radar history-loading-radar" aria-hidden="true">
+                  <div className="history-fetch-lines" aria-hidden="true">
-                    <div className="loading-radar-core" />
+                    <span className="history-fetch-line history-fetch-line-1" />
-                    <div className="loading-radar-ring loading-radar-ring-1" />
+                    <span className="history-fetch-line history-fetch-line-2" />
-                    <div className="loading-radar-ring loading-radar-ring-2" />
+                    <span className="history-fetch-line history-fetch-line-3" />
-                    <div className="loading-radar-sweep" />
-                    <div className="loading-radar-blip loading-radar-blip-1" />
-                    <div className="loading-radar-blip loading-radar-blip-2" />
                   </div>
-                  <div className="loading-thermals history-loading-thermals" aria-hidden="true">
+                  <div className="history-fetch-copy">
-                    <span className="loading-thermal loading-thermal-1" />
-                    <span className="loading-thermal loading-thermal-2" />
-                    <span className="loading-thermal loading-thermal-3" />
-                    <span className="loading-thermal loading-thermal-4" />
-                  </div>
-                  <div className="loading-copy history-loading-copy">
                     <strong>
                       {locale === "en-US"
                         ? "Scanning archived settlement history"

frontend/lib/dashboard-utils.ts

@@ -2252,6 +2252,9 @@ export function getHistorySummary(
   }, 0);
   const mgmSeriesComplete =
     settledData.length >= 2 && mgmSettledCount === settledData.length;
+  const mgmSeries = mgmSeriesComplete
+    ? recentData.map((row) => row.mgm ?? null)
+    : recentData.map(() => null);
 
   return {
     dates: recentData.map((row) => row.date),
@@ -2281,7 +2284,7 @@ export function getHistorySummary(
       ? Number(((hits / debErrors.length) * 100).toFixed(0))
       : null,
     mgmSeriesComplete,
-    mgms: recentData.map((row) => row.mgm ?? null),
+    mgms: mgmSeries,
     recentData,
     settledCount: comparableSettledData.length,
     actuals: recentData.map((row) => row.actual),