added skeletons to admin page when data on dashboard and storage page are loading

cmd/telesrv-admin/web/src/styles/01-foundation.css

@@ -13,6 +13,11 @@
   --panel: #ffffff;
   --panel-subtle: #f7f9fc;
   --panel-strong: #f1f5f9;
+  /* Loading placeholders. Kept as their own pair rather than reusing the
+     panel shades because the sheen has to read as lighter than the base in
+     both themes, and the panel ramp runs the opposite way in dark. */
+  --skeleton-base: #e6ebf2;
+  --skeleton-sheen: #f4f7fa;
   --surface-soft: #f2f7fd;
   --overlay: rgba(24, 34, 47, 0.42);
   --topbar-bg: rgba(255, 255, 255, 0.94);
@@ -100,6 +105,8 @@
   --panel: #171f28;
   --panel-subtle: #1c2530;
   --panel-strong: #212c38;
+  --skeleton-base: #212c38;
+  --skeleton-sheen: #2e3d4c;
   --surface-soft: #1a232d;
   --overlay: rgba(5, 8, 12, 0.62);
   --topbar-bg: rgba(21, 28, 36, 0.86);

cmd/telesrv-admin/web/src/styles/02-pages-and-forms.css

@@ -111,6 +111,52 @@ button.stat-tile.clickable {
   line-height: 1.1;
 }
 
+/* Loading placeholder. Sized in em so it occupies the same box as the text it
+   stands in for -- the tile must not resize when the real value arrives. */
+.skeleton {
+  display: inline-block;
+  border-radius: 6px;
+  background-image: linear-gradient(
+    90deg,
+    var(--skeleton-base) 25%,
+    var(--skeleton-sheen) 37%,
+    var(--skeleton-base) 63%
+  );
+  background-size: 400% 100%;
+  animation: skeletonShimmer 1.4s ease-in-out infinite;
+  /* Nothing here is real content: keep it out of the accessibility tree and
+     out of copied text. The live region announcing "loading" belongs on the
+     container, not on every bar. */
+  user-select: none;
+}
+
+.skeleton-value {
+  height: 0.85em;
+  width: 2.75ch;
+  vertical-align: middle;
+}
+
+.skeleton-text {
+  height: 0.8em;
+  width: 6ch;
+  vertical-align: middle;
+}
+
+@keyframes skeletonShimmer {
+  from {
+    background-position: 100% 50%;
+  }
+  to {
+    background-position: 0 50%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+
 .stat-tile.warn .stat-tile-value {
   color: var(--warn);
 }