Improve Cesium preview loading state

scripts/lib/cesium-preview.css

@@ -9,6 +9,15 @@ body,
   background: #d9e0e2;
 }
 
+#cesiumContainer {
+  opacity: 0;
+  transition: opacity 180ms ease-out;
+}
+
+body.scene-ready #cesiumContainer {
+  opacity: 1;
+}
+
 #controls,
 #diagnostics,
 #status {
@@ -22,6 +31,110 @@ body,
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
 }
 
+#loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: grid;
+  place-items: center;
+  background: #d9e0e2;
+  color: #1b2528;
+  font-size: 13px;
+  letter-spacing: 0;
+  transition: opacity 220ms ease-out, visibility 220ms ease-out;
+}
+
+.loading-card {
+  display: grid;
+  grid-template-columns: 32px minmax(180px, 260px);
+  gap: 12px;
+  align-items: center;
+  padding: 14px 16px;
+  border: 1px solid rgba(70, 86, 90, 0.16);
+  border-radius: 6px;
+  background: rgba(244, 248, 248, 0.88);
+  box-shadow: 0 12px 34px rgba(54, 68, 72, 0.20);
+}
+
+.loading-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(42, 67, 72, 0.18);
+  border-top-color: #147d8a;
+  border-radius: 50%;
+  animation: loading-spin 840ms linear infinite;
+}
+
+.loading-copy {
+  display: grid;
+  gap: 3px;
+}
+
+.loading-copy strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+
+#loadingOverlay span {
+  color: #526064;
+}
+
+.loading-bar {
+  grid-column: 1 / -1;
+  position: relative;
+  height: 3px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(42, 67, 72, 0.12);
+}
+
+.loading-bar span {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 42%;
+  border-radius: inherit;
+  background: #147d8a;
+  animation: loading-bar 1.2s ease-in-out infinite;
+}
+
+@keyframes loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading-bar {
+  0% {
+    transform: translateX(-110%);
+  }
+  55% {
+    transform: translateX(70%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+
+body.scene-ready #loadingOverlay {
+  visibility: hidden;
+  opacity: 0;
+}
+
+body.scene-error #loadingOverlay {
+  color: #5b1414;
+}
+
+body.scene-error .loading-spinner {
+  border-color: rgba(120, 30, 30, 0.18);
+  border-top-color: #9f2f2f;
+  animation-play-state: paused;
+}
+
+body.scene-error .loading-bar span {
+  background: #9f2f2f;
+  animation-play-state: paused;
+}
+
 #controls {
   top: 12px;
   left: 12px;